基於另一個日期選擇器或文本框限制jQuery日期選擇器中的日期

我有兩個文本框與日期選擇器掛鉤。文本框用於開始日期和結束日期。第一個日期選擇器設置爲使用戶在今天之前不能選擇日期，但可以選擇未來的任何日期。基於另一個日期選擇器或文本框限制jQuery日期選擇器中的日期

如何設置第二個日期選擇器，以便它不能在第一個日期選擇器中選擇的日期之前選擇一個日期？例如：如果今天是12/11/10，並且我選擇12/15/10在第一個日期選擇器中，則第二個日期選擇器在12/15/10之前不應該選擇任何東西。

繼承人是我到目前爲止有：

$("#txtStartDate").datepicker({ minDate: 0 }); 
$("#txtEndDate").datepicker({});

來源

2010-12-12 The Muffin Man

例如，在此示例代碼，startDatePicker被選擇爲2010-12-12，startDatePicker的變化事件設置的minDate endDatePicker 2010-12-13。它在這個日期之前鎖定了單元格。這是@Victor提到的一個樣本..我希望它可以幫助...關心... Ozlem。

$("#startDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd', 
    changeMonth: true, 
    minDate: new Date(), 
    maxDate: '+2y', 
    onSelect: function(date){ 

     var selectedDate = new Date(date); 
     var msecsInADay = 86400000; 
     var endDate = new Date(selectedDate.getTime() + msecsInADay); 

     //Set Minimum Date of EndDatePicker After Selected Date of StartDatePicker 
     $("#endDatePicker").datepicker("option", "minDate", endDate); 
     $("#endDatePicker").datepicker("option", "maxDate", '+2y'); 

    } 
}); 

$("#endDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd', 
    changeMonth: true 
});

來源

2010-12-21 01:30:42 user403295

謝謝！您的「endDatePicker」選擇器應該是「#endDatePicker」 – greaterKing 2017-04-28 12:36:16

單純從UI的角度來看，你不應該。如果用戶在兩個日期選擇器上選擇了錯誤的月份，並嘗試選擇正確的月份，則受到UI阻礙的他有50％的變化。理想情況下，您會允許錯誤的選擇並顯示一條有用的錯誤消息，說明結束日期應該在結束日期之後。

如果你想實現你的想法：給每個日期選擇器一個"change"事件，適當地更改其他日期選擇器上的選項。

來源

2010-12-12 00:41:18

非常好的一點，我正要實現這個相同的概念，然後意識到我只是使用JavaScript來顯示錯誤！謝謝維克多！ – 2012-11-20 19:58:37

這是一個很好的建議，但是如何設置defaultDate而不是使用類似於Tin Man的技術，建議如下？這是我的解決方案。 – 2012-12-19 03:03:06

使用第一個日期選擇器UI的「getDate」的方法，並把它傳遞到minDate選擇第二個日期選擇的：

$("#txtEndDate").datepicker({ 
    showOn: "both", 
    minDate: $("#txtStartDate").datepicker("getDate") 
});

來源

2010-12-14 17:38:41

更新：

只在創建時將上述設置的minDate方法。我用onSelect事件，以改變第二日期選擇的這樣的的minDate選項：

$("#txtStartDate").datepicker({ 
    showOn: "both",  
    onSelect: function(dateText, inst){ 
    $("#txtEndDate").datepicker("option","minDate", 
    $("#txtStartDate").datepicker("getDate")); 
    } 
});

來源

2010-12-14 18:11:19

最簡單最有用的方法。 – bodi0 2016-12-09 10:16:00

使用此代碼：

<script type="text/javascript"> 
    $(function() { 
     $("#txtStartDate").datepicker({ 
      dateFormat: 'dd/mm/yy', 
      inline: true, 
      minDate: 'dateToday' 
     }); 
     $("#txtEndDate").datepicker({ 
      dateFormat: 'dd/mm/yy', 
      inline: true, 
      minDate: $("#txtStartDate").datepicker("getDate") }); 
     }); 
</script>

來源

2013-08-20 09:09:31 Anjyr

試試這個男人：

$("#dateTo").datepicker({ 
    dateFormat: 'dd/mm/yy', 
    changeMonth: true, 
    changeYear: true, 
    minDate: new Date() 
    }).datepicker("setDate", new Date()); 
$("#dateFrom").datepicker({ 
    dateFormat: 'dd/mm/yy', 
    changeMonth: true, 
    changeYear: true, 
    onSelect: function(){ 
     $('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate")); 
    } 
    }).datepicker("setDate", new Date());

來源

2016-01-21 23:42:07

鐵皮人的解決方案添加$（「＃txtEndDate」）後，爲我工作。 datepicker（）在底部

$("#txtStartDate").datepicker({ 
    showOn: "both",  
    onSelect: function(dateText, inst){ 
    $("#txtEndDate").datepicker("option","minDate", 
    $("#txtStartDate").datepicker("getDate")); 
    } 
}); 

$("#txtEndDate").datepicker(); //it is not working with out this line

來源

2016-02-26 08:02:43 aby

基於另一個日期選擇器或文本框限制jQuery日期選擇器中的日期

回答

相關問題