CODEWITHSUNDEEP
jquerytwitter-bootstrapmomentjsbootstrap-datetimepicker
Jason Tate
Jason Tate

Reputation: 716

Bootstrap DateTimePicker issue selecting maxDate when input has no value

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.

Upvotes: 0

Views: 5150

Answers (3)

0xFF
0xFF

Reputation: 96

The way I fixed this is to set maxDate as follows:

maxDate: new Date().setHours(23,59,59,999)

If you set maxDate to new Date() only, then it won't allow today's date to be selected as the maximum date selectable has passed by the time the page has rendered.

Upvotes: 2

Kumar
Kumar

Reputation: 11

This worked for me:

maxDate: moment("02/24/2015 23:59:59","MM/DD/YYYY HH:mm:ss")

We don't explicitly need to mention and disable the date like the accepted answer

maxDate: moment("02/25/2015","M/D/YYYY") 
disabledDates: [ "02/25/2015" ]

Rather I feel this is a better fix.Please find the js fiddle: jsfiddle.net/AbhinayKumarGunna/6jx723ep/57

Upvotes: 1

Max Lipsky
Max Lipsky

Reputation: 1842

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.

DEMO https://jsfiddle.net/maxlipsky/waoLzwz5/4/

Upvotes: 4

Related Questions