Using the Bootstrap 3 Datetimepicker v4 http://eonasdan.github.io/bootstrap-datetimepicker/ along with Moment 2.9 and the other required files.
I'm needing to trigger a change event when a user selects a date with the picker, regardless of the value of the input field. It made sense to me to have an empty value for the input and instead use a placeholder with the maximum allowed value.
<div class="row">
<div class="col-sm-6"><div class="form-group">
<div class="input-group date" id="dayjump">
<input type="text" class="form-control" value="" placeholder="24" name="dayportal" id="dayportal" />
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div></div>
</div>
Issue that I seem to be having is the maxDate cannot be selected when the input has no value. Presence of a placeholder seems to make no difference in the issue.
$("#dayjump").datetimepicker({
useCurrent: false,
format: "D",
minDate: moment("2/7/2015","M/D/YYYY"),
maxDate: moment("02/24/2015","M/D/YYYY"),
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down",
previous: "fa fa-angle-left",
next: "fa fa-angle-right",
today: "fa fa-thumb-tack",
clear: "fa fa-trash"
}
});
$("#dayjump").on("dp.change",function (e) {
var y = moment(e.date).format("YYYY");
_m = moment(e.date).format("M");
_d = moment(e.date).format("D");
alert("year=" + y + " month=" + _m + " date=" + _d);
});
see fiddle here https://jsfiddle.net/spasticdonkey/waoLzwz5/1/
you will notice in the example that all dates except the maxDate can be selected, and attempting to select the maxDate will not update the input field as well.
I think, it's bug. I have warning in console:
Deprecation warning: moment construction falls back to js Date. This is discouraged and will be removed in upcoming major release. Please refer to https://github.com/moment/moment/issues/1407 for more info.
You can use crutch to fix this:
maxDate: moment("02/25/2015","M/D/YYYY"),
disabledDates: [
"02/25/2015"
],
Set the date +1 and disable it.