Datepicker - set minDate, основанный на значении другого элемента

Question

Я пытаюсь установить свойство datepickerminDate на основании значения другого элемента.

Я использую это:

$("input[name='selection_itv_date']").click(function() { 

    var min_date_for_itv = $(this).closest('.selection').siblings('.application').find("input[name='job_receiving_date']").val(); 

    $("input[name='selection_itv_date']").datepicker({ 
     showButtonPanel: true, 
     changeMonth: true, 
     changeYear: true, 
     dateFormat: "dd M yy", 
     firstDay: 1, 
     minDate: new Date(min_date_for_itv), 
     yearRange: "-1:+0" 
    }); 
}); 

Мне нужно получить значение input[name='job_receiving_date'] по щелчку, потому что у меня есть несколько входов с этим именем на этой странице. Я пробовал использовать onSend, но не сделал никаких результатов.

Я бы очень признателен за любую помощь.

Answer 1

Ваш текущий код работает, но для этого требуется 2 щелчка. Это потому, что первый клик просто инициализирует ввод как дату, ничего больше. Если вы нажмете на своей странице и нажмете обратно на вход, вы увидите, как появится datepicker, так как теперь это datepicker, с вашим minDate правильно. Попробуй!

Очевидно, что это не очень хороший UX :-) Быстрое исправление просто вызвать the show method сразу после инициализации DatePicker:

$("input[name='selection_itv_date']").click(function() { 
    var min_date_for_itv = ... 
    $("input[name='selection_itv_date']").datepicker({ 
     ... 
    }); 

    $("input[name='selection_itv_date']").datepicker('show'); 
}); 

аккуратнее вариант может быть инициализацию вашего Datepicker независимо от мыши, скажем, на документ готов, и обновить minDate опцию мыши:

$("input[name='selection_itv_date']").datepicker('option', 'minDate', min_date_for_itv); 

Хотя только что попробовал, что это выглядит как обработчик щелчка вмешивается в DatePicker и не правильно отобразить. Если пользователь выбирает min_date_for_itv, лучше всего было бы, чтобы вызвать обновление вашего DatePicker на изменение этого ввода:

$("input[name='job_receiving_date']").on('change', function() { 
    $("input[name='selection_itv_date']").datepicker('option', 'minDate', min_date_for_itv); 
}); 

Как и в сторону, если вы используете селектор более чем один раз, это хорошо идея кэшировать его:

var $datepicker = $("input[name='selection_itv_date']"); 

$datepicker.datepicker({ ... }); 
$datepicker.datepicker('show'); 
... etc 

Answer 2

В вашем коде вы устанавливаете minDate для всех входов после однократного нажатия. Вы должны установить minDate для ввода, нажатого в данный момент.

Если вы измените строку

$("input[name='selection_itv_date']").datepicker({ 

в

$("this").datepicker({ 

, это будет просто создать DatePicker на лету для этого входа.