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
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);
}
});
$('#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.
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.