如何在javascript / jquery中的日期選擇器中禁用日歷中的過去日期？

Question

我在一個網站上工作，我想在其中禁用日歷中的過去日期。

我用來制作日歷的HTML和JQuery代碼是：

 $("#startdate_datepicker").datepicker({numberOfMonths:[1, 2]}); $("#enddate_datepicker").datepicker({numberOfMonths:[1, 2]}); 

 <link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="dates"> <div class="start_date" style="width:50%;margin-right:3%;"> <input readonly="readonly" class="form-control start_date mb-4" type="text" placeholder="start date" id="startdate_datepicker"> </div> <div class="end_date" style="width:50%;margin-left:3%;"> <input readonly="readonly" class="form-control end_date mb-4" type="text" placeholder="end date" id="enddate_datepicker"> </div> </div> 

問題陳述：

我想知道我應該在上面的代碼中進行哪些更改， 以便在選擇開始日期之后，在選擇結束日期時應該禁用開始日期之前的日期 。

Answer 1

您可以使用JQuery UI的option = beforeShowDay ，然后自定義每天的樣式，如下面的演示所示：

作為beforeShowDay的 JQuery UI指南：

一個以日期作為參數並且必須返回帶有以下內容的數組的函數：

 [0]: true/false indicating whether or not this date is selectable [1]: a CSS class name to add to the date's cell or "" for the default presentation [2]: an optional popup tooltip for this date 

 let startDateUI = $("#startdate_datepicker").datepicker({ numberOfMonths:[1, 2], todayHighlight: true, beforeShowDay: function (calDate) { return calDate - new Date() < 0 ? [false, '', ''] : [true, '',''] } }); $("#enddate_datepicker").datepicker({ numberOfMonths:[1, 2], todayHighlight: true, beforeShowDay: function (calDate) { let selectedStartDate = $( "#startdate_datepicker" ).datepicker( "getDate" ) return calDate - selectedStartDate < 0 ? [false, 'disable-day', 'not available day!!!'] : [true, '',''] } }); 

 .disable-day{ background-color:red; } 

 <link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="dates"> <div class="start_date" style="width:50%;margin-right:3%;"> <input readonly="readonly" class="form-control start_date mb-4" type="text" placeholder="start date" id="startdate_datepicker"> </div> <div class="end_date" style="width:50%;margin-left:3%;"> <input readonly="readonly" class="form-control end_date mb-4" type="text" placeholder="end date" id="enddate_datepicker"> </div> </div> 

Answer 2

使用.datepicker("option", "minDate", <value of start date>)設置最早的可選日期。 “ maxDate”將允許您設置最新的可選日期。