Bootstrap 3 Datetimepicker eonasdan linked inputs set max date

Question

im using the Plugin Bootstrap 3 Datetimepicker from eonasdan http://eonasdan.github.io/bootstrap-datetimepicker/

I have two linked inputs, the second one (#time_to) should be select up to 90 days from the date of the first input. But the maxDate starts at the current Date. For example:

Today: 11. Nov 2015

First: 01. Jan 2016

Second: max. to 08. Feb 2016 (11. Nov 2015 - 08. Feb 2016 = 90) should be ~ 01. April 2016

$('#time_from').datetimepicker({
    locale: 'de',
    viewMode: 'days',
    minDate: DateRange(0), //Current
    format: 'DD. MMMM YYYY - HH:mm',
});

$('#time_to').datetimepicker({
    locale: 'de',
    viewMode: 'days',
    maxDate: DateRange(90), // max. 90 days
    useCurrent: false,
    format: 'DD. MMMM YYYY - HH:mm'
});

$('#time_from').on('dp.change', function (e) {
    $('#time_to').data('DateTimePicker').minDate(e.date);
});

Amel Amel · Accepted Answer · 2015-11-11T14:48:38

As I understood, you need "time_to" maxDate to be time_from + 90 days? In that case, you can just use moment.js which you need to include in your project anyways:

$('#time_from').datetimepicker({
    viewMode: 'days',
    minDate: new Date(), //Current
    format: 'DD. MMMM YYYY - HH:mm',
});

$('#time_to').datetimepicker({
    viewMode: 'days',
    maxDate: new Date().setDate(new Date().getDate() + 90),
    useCurrent: false,
    format: 'DD. MMMM YYYY - HH:mm'
});

$('#time_from').on('dp.change', function (e) {
    $('#time_to').data('DateTimePicker').minDate(e.date);

    //Use moment.js here
    var m = moment(new Date(e.date));
    m.add(90, 'days');
    $('#time_to').data('DateTimePicker').maxDate(m);
});

I have working JsFiddle

Bootstrap 3 Datetimepicker eonasdan linked inputs set max date

1 Answers