bootstrap datetimepicker - set maxDate relative to now?

3
votes

I use this datetimepicker:
http://eonasdan.github.io/bootstrap-datetimepicker/Options/
Basically I want to set maxDate: moment(), i.e maxDate should be limited to now. The problem is by the time the datepicker is opened maxDate is not now() anymore. I want to set it maxDate to now everytime the datepicker is shown.

I want to enforce it globally if possible, not to specify it on every datetimepicker() instance. Is it possible to somehow give a relative date to now using moment.js ?

See this fiddle:
https://jsfiddle.net/0Ltv25o8/3281/
I set maxDate to now. You'll see after minute from the page load, you won't be able to choose the current minutes using the arrow buttons.

3
javascripttwitter-bootstrapmomentjseonasdan-datetimepickermaxdate
I suggest you to add relevant code snippet since setting maxDate: moment() should be enough to disable future dates (for every opening of the picker). Probably the issue is elsewhere in your code. You can use class selector on picker init to set config for all your instances or cache config object in a variable and then use the variable instead of repeating same values. You can manipulate moment objects using add/subtract etc as described in the docs - VincenzoC

3 Answers

6
votes

How about using custom version of datepicker plugin?

I have added new parameter maxDateNow (any ideas for a better name?) that allows selecting date/time up to present time.

$('#datetimepicker1').datetimepicker({maxDateNow: true, format:'DD/MM/YYYY HH:mm'});

See this fiddle

2
votes

You can listen to dp.show event so you can change maxDate to the current time every time the picker shows. Here a code example:

$('#datetimepicker1').datetimepicker({
  maxDate: moment(), 
  format:'DD/MM/YYYY HH:mm'
}).on('dp.show', function(){
  $('#datetimepicker1').data("DateTimePicker").maxDate(moment());
});
<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.37/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.13.0/moment.min.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.37/js/bootstrap-datetimepicker.min.js"></script>

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

I used Liked This, It sets min Date to today's Date

 $( '#Field_ID' ).datepicker({dateFormat: 'dd-MM-yy', minDate : new Date()});