Datepicker - 根據另一個元素的值設置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出現，因爲它現在是一個日期選擇器，你的minDate正確。嘗試一下！

顯然，這不是很好UX :-)一個快速的解決辦法是簡單地調用the show method您初始化日期選擇器之後：

$("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'); 
}); 

了一個更簡潔的選擇可能是您的初始化獨立日期選擇器的點擊，說在文件準備就緒，並更新點擊minDate選項：

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

雖然剛剛嘗試，它看起來像單擊處理與干擾日期選擇器，它無法正確顯示。如果用戶選擇min_date_for_itv，最好是將更新觸發您的日期選擇器上的是輸入的變化：

$("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({ 

，它只會創建日期選擇器上的飛該輸入。