Search code examples
jquerypluginsdatetimepickerbootstrap-datetimepicker

Bootstrap 3 Datetimepicker eonasdan linked inputs set max date


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);
});

Solution

  • 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