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

 <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

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

 <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

• javascript
• jquery
• jquery-ui
• jquery-ui-datepicker

• try with jQuery UI jqueryui./datepicker/#date-range – yashhy Commented Nov 25, 2013 at 7:10

2 Answers 2

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

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

Demo here

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