Выбор даты jquery разделен на несколько полей - PullRequest
Новая
       13

Выбор даты jquery разделен на несколько полей

6 голосов
/ 17 января 2010

У меня обычный Jickery DatePicker работает нормально. Но я хочу добавить его в набор полей выбора, а не в одно текстовое поле. Я успешно загрузил его в одно поле выбора с определенным форматом, но не уверен, как передать все три в разные поля с разными форматами. 

$(document).ready(function(){
  $("#search_startdate").datepicker({showOn: 'button', 
                                     buttonImage: '/images/cal/calendar.gif', 
                                     buttonImageOnly: true, 
                                     minDate: 0, 
                                     maxDate: '+6M +10D', 
                                     showAnim: 'fadeIn',
                                     altField: '#startdate_month', 
                                     altFormat: 'MM',
                                     altField: '#startdate_day',
                                     altFormat: 'dd'});
    //$("#datepicker").datepicker({showOn: 'button', buttonImage: 'images/calendar.gif', buttonImageOnly: true});

});

Это не работает, оно работает с последним полем, но игнорирует первое. Если я удаляю второй набор строк altField и altFormat, первая работает.

Я также пытался поместить их в серию, 

altField: '#startdate_month', '#start_day', altFormat: 'MM', 'dd'

Проблема такая же, как здесь:

http://www.experts -exchange.com / Программирование / Языки / Scripting / JavaScript / Jquery / Q_24767646.html

Есть идеи?

Спасибо

Ответы [ 3 ]

8 голосов
/ 17 января 2010

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

$(document).ready(function(){
  $("#search_startdate").datepicker({showOn: 'button', 
                                     buttonImage: '/images/cal/calendar.gif', 
                                     buttonImageOnly: true, 
                                     minDate: 0, 
                                     maxDate: '+6M +10D', 
                                     showAnim: 'fadeIn',
                                     altField: '#startdate_month', 
                                     altFormat: 'MM',
                                     onClose: function(dateText,picker) {
                                                 $('#startdate_day').val( dateText.split(/\//)[1] );
                                              }
                                    });
});
1 голос
/ 26 февраля 2012

Это проще, я думаю: 

$('#datePickerField').datepicker({
    onClose: function (dateText) {
                var objDate = new Date(dateText);
                $('#year_field').val(dateText.length ? objDate.getFullYear() : '');
                $('#month_field').val(dateText.length ? objDate.getMonth() + 1 : '');
                $('#day_field').val(dateText.length ? objDate.getDate() : '');
            }
});

и, если вы хотите, чтобы изменения, внесенные в поля дня, месяца, года, обновили основной сборщик данных: 

$('#year_field,#month_field,#day_field').change(function() {
    $('#datePickerField').datepicker('setDate', new Date(
        parseInt($('#year_field').val(), 10),
        parseInt($('#month_field').val(), 10) - 1,
        parseInt($('#day_field').val(), 10)));
});
0 голосов
/ 22 апреля 2013

просто оставив здесь ответ для дальнейшего использования, вот пример того, как я это сделал: 

$("#departDate").datepicker({
    onClose: function( selectedDate ) {

        // use split() to break down the [MM/DD/YYYY] format
        // populate each into multiple field

        $('#departDateDay').val( selectedDate.split(/\//)[1] ); // day
        $('#departDateMonth').val( selectedDate.split(/\//)[0] ); // month
        $('#departDateYear').val( selectedDate.split(/\//)[2] ); // year
    }
})
...