jQuery Datepicker и Timepicker для одного и того же поля ввода, чтобы всплывать один за другим

Question

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

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

Я использую 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>

Answer 1

Я бы хотел порекомендовать Любое + Время (TM) , в котором вы можете объединить дату / время в одном поле с одной простой в использовании (и быстрой!) Датой. / время выбора комбо.

Answer 2

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

Просто свяжите событие щелчка, чтобы открыть его:

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

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

Answer 3

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

1. Привязка выбора даты к вводу.
2. Присоединить метод, чтобы открыть указатель времени к событию .onClose () средства выбора даты.
3. Добавить значение выбора времени (с предыдущим пробелом) к входному значению.

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

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

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

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

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

Answer 4

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

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

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

Answer 5

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

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

Answer 6

Вот альтернатива:

http://www.r -ip.ru / DEV / DateTimePicker / index.html

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