JQuery UI - DatePicker - установка второго на основе выбора из первого

Question

JQuery UI - DatePicker - установка второго на основе выбора из первого

0

Использование jQuery 1.9.1 & jQuery-ui 1.10.3. У меня есть страница, на которой есть 2 datepickers. Они будут использоваться в качестве фильтра при выборе из таблицы SQL. Я читаю строку таблицы, в которой указаны min и max даты на таблице.

datepicker1 - дата начала, datepicker2 - дата окончания. Используя min и max выше, календарь должен начинаться с datepicker1 с этой датой в качестве значения по умолчанию, а datepicker2 должен иметь max как самую последнюю выбираемую дату. Эти 2 даты служат для начала и конца выбранных дат в моем календаре. В поле ввода ни одной даты не было установлено ни одной даты.

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

Как только дата была выбрана из одной, другой (невыбранный) datepicker будет иметь предварительно определенное окно из 14 дней от выбранного (> = если сначала был выбран datepicker1, <= если datepicker2 был выбран первым) в качестве его max ( или min). Например:

Загрузка страницы и minDate 2012-12-10 & maxDate 2013-10-22 возвращается из запроса. datepicker1 имеет дату 12/10, так как это "начало" (самый последний день назад, который можно выбрать). datepicker2 имеет 10/22/2013 date как его "конец" (самый новый день, который можно выбрать).

Пользователь нажимает на управление календарем в datepicker1 и выбирает 2013-02-14.

Теперь datepicker2 бы пересчитывать свой новый MaxDate, чтобы через 14 дней после 2013-02-14.

Затем пользователь может выбрать любую дату> = 2013-02-14 по 2013-02-28 в качестве даты окончания.

Процесс будет отменен, если сначала выбрать datepicker2.

Параметры для каждого параметра datepicker практически одинаковы для обоих:

    $(function(){
      $("#datepicker1").datepicker({
        dateFormat: "yy-mm-dd",
        dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        changeMonth: true,
        changeYear: true,
        buttonImage: "calendar-blue.png",
        buttonImageOnly: true,
        buttonText: "Choose Start Date",
        showOn: "both",
        numberOfMonths: 1,
        beforeShow: function(input, inst) {
                $(".ui-datepicker").addClass("resizeDP");
                },
        onClose: function(selectedDate) {
                $(".ui-datepicker").removeClass("resizeDP");
                }
  });
});

Я могу назначать max и min даты в календаре, когда страница загружается, но не может сделать "новый" 14-й день, когда он будет выбран. Я пробовал несколько разных способов (в основном в onClose), но не могу заставить их работать.

steve_o 22 окт. 2013, в 15:40

Источник

Теги:

javascript

jquery

datepicker

jquery-ui

1 ответ

Ещё вопросы

Trevor · Answer 1 · 2013-10-22T23-30-00.000Z

Вы пробовали что-то вроде этого?

 $("#datepicker2").click(function(){
     if($("#datepicker1").val() != ""){
       $(this).datepicker("destroy");
       $(this).datepicker({
         //initialize datepicker2 based on datepicker1 value 
       });
       $(this).datepicker("show");
    }   
 });

И наоборот.

Заметьте, я не уверен, открывается ли сборщик событий перед событием on click. Но вы всегда можете сделать это на mouse down или даже blur событие Datepicker1, чтобы установить Datepicker2 и т.д.

@steve_o отметьте этот ответ как принятый, если он ответил на ваш вопрос, в противном случае оставьте отзыв о том, что не решено. Спасибо