I am trying to configure a datepicker such that "beforeShowDay" function of jQuery datepicker will disable leap day (Feb 29).
When I try to debug in firefox by putting breakpoints under beforeShowDay, I do see that it correctly returns true or false depending on what date is selected. However, on the UI the leap day is enabled, and no tool tip is available.
Another thing to note is that only format attribute is applied to the control, minDate and maxDate has no effect. So if I change format from mm/dd/yyyy to yyyy-mm-dd that will take effect, but setting date ranges won't work.
CSHTML
<div class="abc">
@Html.TextBoxFor(x => x.StartDate, new { @class = "form-control quote-textbox", id="QuoteEffectiveDate"})
</div>
JS
$("#QuoteEffectiveDate").datepicker({
minDate: -90,
maxDate: 90,
format: "mm/dd/yyyy",
beforeShowDay: function (date) {
const febIndex = 1;
const day29Index = 29;
var month = date.getMonth();
var day = date.getDate();
var dateEnabled = !(month === febIndex && day === day29Index);
return [dateEnabled, "", "Leap Year Day not available"];
}
});
Update:
It appears that the datepicker being used in our code is Datepicker for bootstrap. All the options/methods/events defined in this document seems to work.
For e.g. instead of using minDate and maxDate, I replaced it with startDate and endDate, which is now working. I also noticed that their documentation has no reference to beforeShowDay, and hence it might not be working? What puzzles me is that the code still stops at beforeShowDay breakpoints. May be this datepicker is derived (based on) the jQuery UI datepicker? More research awaits.
$('#QuoteEffectiveDate.datepicker').datepicker({
startDate: "-90d",
endDate: "+90d",
autoclose: true,
todayHighlight: true,
format: "mm/dd/yyyy"
}).on("changeDate", function (e) {
$("#QuoteEffectiveDate.datepicker").valid();
});