Skip to content Skip to sidebar Skip to footer

Bootstrap Datetimepicker - Set MaxDate Relative To Now?

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

Solution 1:

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


Solution 2:

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" />
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" />

<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>

Solution 3:

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

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

Post a Comment for "Bootstrap Datetimepicker - Set MaxDate Relative To Now?"