CODEWITHSUNDEEP
jquerytwitter-bootstrapbootstrap-datetimepicker
user783322
user783322

Reputation: 481

Bootstrap datetimepicker stepping issue

I have two linked Bootstrap datetimepickers. Here's the code for them:

var d = new Date();
var one_month = d.setMonth( d.getMonth( ) + 1 );

$(function () {
    $('#pick1').datetimepicker({
            locale: 'en',
            sideBySide: true,
            defaultDate: new Date(),
            minDate: new Date(),
            format: 'DD/MM/YYYY HH:mm',
            stepping: 15
    });

    $('#pick2').datetimepicker({
            locale: 'en',
            sideBySide: true,
            defaultDate: one_month,
            minDate: new Date(),
            format: 'DD/MM/YYYY HH:mm',
            stepping: 15
    });

    $('#pick1').on('dp.change', function (e) {
            $('#pick2').data('DateTimePicker').minDate(e.date);
    });
    $('#pick2').on('dp.change', function (e) {
            $('#pick1').data('DateTimePicker').maxDate(e.date);
    });
});

The issue I'm having is that dependent on the time now, one of the pickers (usually pick1) doesn't display the default date.

Here's a jsFiddle to illustrate:

https://jsfiddle.net/6xbt5wa9/1/

(If it looks okay, run it again after a few minutes)

I think this issue is related to the stepping option, this is only because if you comment it out, it fixes the issue.

It also appears as though the issue is related to the beginning of the stepping figure. So, if stepping is set to 15; minutes 15, 16, 17 will have the issue, but towards 30 it will not. I haven't tested this hypothesis to conclusion, life's too short.

Can anyone help? Am I missing something?

Upvotes: 4

Views: 5172

Answers (2)

Ahmed Alkhidir
Ahmed Alkhidir

Reputation: 3

$(function () {
    $('#pick1').datetimepicker({
            locale: 'en',
            sideBySide: true,
            defaultDate: new Date(),
            minDate: new Date(),
            format: 'DD/MM/YYYY HH:mm',
            stepping: 15
    });

    $('#pick2').datetimepicker({
            locale: 'en',
            sideBySide: true,                  
            minDate: new Date(),
            format: 'DD/MM/YYYY HH:mm',
            stepping: 15
    });

    $('#pick1').on('dp.change', function (e) {
            $('#pick2').data('DateTimePicker').minDate(e.date);
    });
    $('#pick2').on('dp.change', function (e) {
            $('#pick1').data('DateTimePicker').maxDate(e.date);
    });
});

Upvotes: 1

Will.Harris
Will.Harris

Reputation: 4014

I have just ran into this exact problem, the issue has been raised on the plugins GitHub Page and still looks like this bug is yet to be fixed.

The reason why it happens is because the stepper rounds to the nearest value. So sometimes this will mean rounding down to the nearest 15 which can be before minDate = moment().

Example: 11:18am will round down to 11:15am but this is before moment() making it invalid.

This explanation is courtesy of the GitHub issue raiser.

The issue raiser goes on to provide a hacky workaround which I'm unsure how reliable it is. Maybe this issue is still being resolved but it was raised a while ago!

I thought I would share this information with everybody (even if this is an old question!) as there doesn't some to be a lot of help out there about this.

Upvotes: 4

Related Questions