JQuery Datepicker и Timepicker для одного и того же поля ввода для всплывающих окон один за другим

У меня есть Datepicker и Timepicker в двух отдельных полях ввода, но мне нужно объединить два ввода полей в один для вызова базы данных. Хотелось узнать, могу ли я использовать только одно поле ввода для обоих элементов управления?

сначала вызовите datepicker, и пользователь щелкнет нужную дату, и он будет вводить значение, тогда всплывающее окно будет отображаться и добавит дату, выбранную пользователем в первом действии.

Я использую jQuery UI Datepicker и Timepickr плагины

Итак, у меня есть что-то вроде этого

<input class="datepicker">2009-06-22</input>
<input class="timepicker">12:00:00</input>

Но хотелось бы что-то вроде этого

<input class="datetimepicker">2009-06-22 12:00:00</input>

<script type="text/javascript">
// Date and Time picker same input field
$("#datepicker").datepicker( {
   dateFormat: 'yy-mm-dd',
   onClose: function(dateText, inst) {
      var tempDate = $("#datepicker").val(dateText);
      $("#datepicker").timepickr({
         onClose: function(timeText, inst) {
            var tempTime = $("#datepicker").val(dateText);  
            alert("Temp Time: '" + tempTime.val() + "'");
            $("#datepicker").val(tempDate.val() + ' ' + tempTime.val());
         }  
      });                                   
   }
});             
</script>

Ответы

Ответ 1

Я бы рекомендовал Any + Time (TM), в котором вы можете комбинировать дату/время в одном поле с помощью простой и удобный (и быстрый!) компилятор даты/времени.

Ответ 2

Вы можете связать событие с событием onClose() для datepicker. Попросите его открыть свой сборщик времени. Пусть datepicker записывает базовое значение ввода и присваивает значение timepicker значение после пробела на тот же вход.

Введите дату для ввода даты.
Приложить метод, чтобы открыть timepicker для .onClose() события выбора даты.
Введите значение времени выбора (с предыдущим пробелом) для ввода значения.

Обновлено: Следующее обновление, полученное в результате обновленного вопроса.

В документации приведен краткий пример того, как привязать событие/действие к закрытию datepicker:

$('.selector').datepicker({
   onClose: function(dateText, inst) { ... }
});

В этом примере вы можете использовать свою функцию, следующую за "onClode:", чтобы записать значение на вход и всплывающее окно timepicker.

$(".selector").datepicker({
  onClose: function(dateText, inst) {
    $(".selector").val(dateText);
    // Raise Timepickr
  }
});

Ответ 3

Не jQuery, но он хорошо работает для календаря со временем: JavaScript Date Time Picker.

Просто привяжите событие click, чтобы открыть его:

$("#date").click(function() {
    NewCssCal($(this).attr('id'), 'mmddyyyy', 'dropdown', true, 12);
});

Лично я считаю, что это намного легче следовать. Но, очевидно, у вас есть так много вариантов с несколькими плагинами jquery, доступных для выполнения вашей работы.

Ответ 4

Здесь альтернатива:

http://www.r-ip.ru/dev/datetimepicker/index.html

$('#datetimepicker').datetimepicker({ 
  dateFormat: 'yy-mm-dd',
  timeFormat: ' hh:ii:ss' 
});

Ответ 5

Вы можете попробовать комбинировать входы с обоих элементов управления в один, например

$("#datetime").focus(function() {
    var mydate = $("#date").val();
    var mytime = $("#time").val();
    if(mydate && mytime && !this.value) {
        this.value = mydate + " " + mytime;
    }
});

Ответ 6

Пожалуйста, проверьте ссылка.

Я обновил некоторую проблему макета и добавил второй слайдер, который будет активен, если {showTime:true, time24h:true}

Вы можете найти оригинал в Код Google.