Разделите указатель даты пользовательского интерфейса jQuery на 3 отдельных текстовых поля

#jquery #jquery-ui #jquery-ui-datepicker

#jquery #jquery-ui #jquery-ui-datepicker

Вопрос:

Кто-нибудь знает элегантный способ разделения ввода jquery-ui datepicker на 3 отдельных поля?

По умолчанию вводится только одно текстовое поле: DD/MM/YYYY

Я должен разделить входные данные на 3 отдельных для дня, месяца и года: DD , MM , и YYYY .

Ответ №1:

 <input type='text' id='fullDate' name='fulldate'>
<!-- Your other HTML fields listed above -->

$('#fullDate').datepicker({
    onSelect: function(dateText, inst) {
        var pieces = dateText.split('/');
        $('#day').val(pieces[0]);
        $('#month').val(pieces[1]);
        $('#year').val(pieces[2]);
    }
})
  

рабочий пример http://jsfiddle.net/jomanlk/7NgpQ /

Комментарии:

1. Идеальный пример того, что я искал, спасибо

Ответ №2:

Вы можете использовать datepicker функцию onClose , а затем получить значение.

Смотрите это http://jsfiddle.net/96FPU /

Это будет работать только в том случае, если на dateFormat него правильно ссылается индекс массива, т. Е. В моем примере он работает с day = index 0, month = index 1, year = index 1 . Также в моем примере я просто присваиваю значения spans'

Ответ №3:

Вы можете использовать .datepicker('dialog') метод для достижения этого эффекта.

 function onSelect(dateText, inst) {
    var pieces = dateText.split('/');
    for (var i = 0; i < pieces.length;   i)
        $('.date:eq(' i ')').val(pieces[i]);
};

$('.date').click(function(event) {
    var d = $('.date').map(function() { return $(this).val() }).get().join('/');
    $(this).datepicker('dialog', d, onSelect, { dateFormat: 'dd/mm/yy' }, [10, 40]);
});
  

Посмотрите это в действии: http://jsfiddle.net/william/QHasQ /.