Eonasdan Bootstrap Datetimepicker - Can't set minDate to now with current time

Question

I need to set the min date to the current with time. But it's only working when i set the date without time. I've tried several time formats and found no solution.

Here are my settings

Default:

settings: {
    locale: 'de',
    viewMode: 'days',
    format: 'DD. MMMM YYYY',
    useStrict: true,
    focusOnShow: false,
    showClose: true,
},

Datepicker Settings:

this.$time_from.datetimepicker($.extend(true, DefaultDatepicker.settings, {
    minDate: DefaultDatepicker.getDateRange(0),
    maxDate: DefaultDatepicker.getDateRange(365),
    format: 'DD. MMMM YYYY - HH:mm',
    viewMode: 'days'
}));

Output: 08. November 2016 - 00:00

Function to calculate the date:

getDateRange: function (max) {
    var CurDate = new Date();
    CurDate.setDate(CurDate.getDate() + max);
    var mm = CurDate.getMinutes();
    var hh = CurDate.getHours();
    var dd = CurDate.getDate();
    var mm = CurDate.getMonth() + 1;
    var y = CurDate.getFullYear();

    //return mm + '/' + dd + '/' + y + ' ' + hh + ':' + mm + ':' + ss; //not working output: 2016-11-08T14:18:45+01:00 + error

    return mm + '/' + dd + '/' + y;
},
//Example getDateRange(0) = now, getDateRange(1) = tomorrow

TESTED: Also not working

newgetDateRange: function (max) {
    var date = new Date();
    date.setDate(date.getDate() + max);
    var ss = ( '0' + (date.getSeconds())).slice(-2);
    var mm = ( '0' + (date.getMinutes())).slice(-2);
    var hh = ( '0' + (date.getHours())).slice(-2);
    var d = ( '0' + (date.getDate())).slice(-2);
    var M = ( '0' + (date.getMonth() + 1) ).slice(-2);
    var Y = date.getFullYear();

    var $new = Y + '-' + M + '-' + d + 'T' + hh + ':' + mm + ':' + ss + 'Z';
    return $new;
},

Answer 1

I think your problem is the format of the result of getDateRange function, probably it should return the date in the DD. MMMM YYYY - HH:mm format.

The docs says (for the date function):

Parsing of the newDate parameter is made using moment library with the options.format and options.useStrict components configuration.

I think that it use the same logic for the minDate and maxDate options.

Anyway minDate and maxDate both accepts moment object, so your getDateRange function can return a moment instead of a string and you can simply use add() to get your range.

Here a working example:

var DefaultDatepicker = {
  settings: {
    locale: 'de',
    viewMode: 'days',
    format: 'DD. MMMM YYYY',
    useStrict: true,
    focusOnShow: false,
    showClose: true,
  },
  getDateRange: function(max){
    return moment().add(max, 'days');
  }
};

$('#datetimepicker').datetimepicker($.extend(true, DefaultDatepicker.settings, {
    minDate: DefaultDatepicker.getDateRange(0),
    maxDate: DefaultDatepicker.getDateRange(365),
    format: 'DD. MMMM YYYY - HH:mm',
    viewMode: 'days'
}));

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/locale/de.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js"></script>

<div class="input-group date" id="datetimepicker">
  <input type="text" class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>