javascript 如何禁用日期选择器上的所有以前的日期

How to disable all previous dates on the datepicker

提问by Optimus

I've two date pickers for select the start date and end date. Once I pick a start date, I want to grey out all previous dates on the calendar for the end date field I tried the following code but its grey out previous dates with respect to current date

我有两个日期选择器用于选择开始日期和结束日期。一旦我选择了一个开始日期，我想将日历上所有以前的日期作为结束日期字段变灰我尝试了以下代码，但它相对于当前日期将以前的日期变灰

script

脚本

$("#startDate").onChange(function () {
    var currentDate = new Date().getDate();
    var startDate = new Date($(this).val());
    var timeDiff = Math.abs(currentDate.getTime() - startDate.getTime());
    $("#hDate")[0].value = Math.ceil(timeDiff / (1000 * 3600 * 24));
});

$(".datepicker").datepicker({
    buttonImage: "../Images/calender.png",
    buttonImageOnly: true,
    showOn: "button",
    minDate: -($("#hDate")[0].value)
});

HTML

HTML

 <input type="text" placeholder="Start" class="datepicker" id="startDate">
 <input type="text" placeholder="End" class="datepicker" id="endDate">
 <input type="hidden" id="hDate" value="">

how can I solve this

我该如何解决这个问题

回答by Salman A

The datepicker fires an onSelectevent when a date is chosen. Use this event to set the minDateoption in the other datepicker. Here is how:

日期选择器在选择日期时触发onSelect事件。使用此事件minDate在其他日期选择器中设置选项。方法如下：

$("#endDate").datepicker();
$("#startDate").datepicker({
    onSelect: function (dateText, inst) {
        var date = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);
        $("#endDate").datepicker("option", "minDate", date);
    }
});

Demo here

演示在这里

回答by Kirti Pawar

$('#startDate').datepicker({dateFormat: 'yy-mm-dd'});
$('#endDate').datepicker({dateFormat: 'yy-mm-dd'});
$('#startDate').on("change", function() {
       //Begin the re-creation
       $('#end-datepicker').datepicker( "destroy" );
       $('#endDate').datepicker({
                /**
                 * Set the date to be the same as the start
                **/
                minDate : $('#startDate').datepicker( "getDate" ),
                dateFormat: 'yy-mm-dd',
                //Optional: setDate: The same as minDate.
             });
        });