Изменить отображаемый месяц в jQuery datepicker, в зависимости от другого экземпляра datepicker

jquery jquery-ui jquery-ui-datepicker

11577 просмотра

3 ответа

У меня есть два поля DatePicker, одно « дата начала », другое « конец_даты ».

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

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

Как реализовать внутри JQuery DatePicker? Какие параметры выбора даты я должен определить?

$("#start_date").datepicker({
  //which datepicker options should put here?
})
Автор: Mellon Источник Размещён: 12.11.2019 09:30

Ответы (3)


6 плюса

Решение

Это устанавливает дату по умолчанию другого календаря, как вы хотите. Если дата уже выбрана, она не изменится.

    $(document).ready(function() {
        $( "#datepicker" ).datepicker({onSelect: function(dateText, inst) {
            $( "#datepicker2" ).datepicker( "option", "defaultDate", dateText );
        }});
        $( "#datepicker2" ).datepicker({onSelect: function(dateText, inst) {
            $( "#datepicker" ).datepicker( "option", "defaultDate", dateText );
        }});
    });

Если вы хотите заставить другой сборщик дат сбрасывать уже выбранную дату на другой месяц календаря, используйте это:

$(document).ready(function() {
        $( "#datepicker" ).datepicker({onSelect: function(dateText, inst) {
            $( "#datepicker2" ).datepicker( "setDate" , dateText )
        }});
        $( "#datepicker2" ).datepicker({onSelect: function(dateText, inst) {
            $( "#datepicker" ).datepicker( "setDate" , dateText )
        }});
});
Автор: AlfaTeK Размещён: 15.03.2011 03:45

1 плюс

Вы можете попробовать это, чтобы пользователь не выбирал end-dateменьше start-dateи start-dateбольше чем end-date.

    $("#start_date").datepicker({
        defaultDate: '-7d',
        changeMonth: true,
        changeYear: true,
        onSelect: function (dateStr) {
            $("end-date").datepicker('option', 'minDate', $(this).datepicker('getDate') || '-1m');
        }
    });
    $("end-date").datepicker({
        defaultDate: new Date(),
        changeMonth: true,
        changeYear: true,
        onSelect: function (dateStr) {
            $("#start_date").datepicker('option', 'maxDate', $(this).datepicker('getDate') || 0);
        }
    });
Автор: Aivan Monceller Размещён: 15.03.2011 04:02

0 плюса

Мое предложение состоит в том, чтобы сохранить выбранную дату datepicker1и, прежде чем показывать datepicker2, вручную установить ту же дату. Так, datepicker1.date == datepicker2.date. Я надеюсь, что это поможет вам.

var dateselected = '';

$( "#datepicker1" ).datepicker({
  onSelect: function(dateText, inst) {
    dateselected = dateText;
  } 
});
$( "#datepicker2" ).datepicker({
  beforeShow: function(input, inst) {
    if(dateselected != '')
       $( "#datepicker2" ).datepicker('setDate',dateselected);
  } 
});

Вы можете увидеть его по следующей ссылке: http://jsbin.com/orizi4

Автор: Fran Verona Размещён: 15.03.2011 03:47
Вопросы из категории :
32x32