3

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.

user3599803
  • 6,435
  • 17
  • 69
  • 130
  • 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](http://momentjs.com/docs/#/manipulating/) – VincenzoC Aug 18 '16 at 16:58

3 Answers3

6

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

tata.leona
  • 1,060
  • 11
  • 17
3

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>
VincenzoC
  • 30,117
  • 12
  • 90
  • 112
  • Thanks. I've actually considered that option of event callback. The problem - how do I enforce that globally, for every datepicker to which I want to set now() as max or min ? I'm already using my own defaults object config and using jQuery.extend every time I'm creating a new datepicker. – user3599803 Aug 20 '16 at 17:56
  • Can you use a class selector in both init code and event callback code? – VincenzoC Aug 20 '16 at 18:05
  • no, I have datepickers that are inserted dynamically (ajax heavy web-app), some inputs do not exist yet when the page load. I might add the event callback code to every datepicker which I need, but that would be somewhat messy for my code. too bad I can't specify now-relative max/min date. :( – user3599803 Aug 20 '16 at 18:10
  • I think maybe a shortcut on the datetimepicker init itself, that will do your code might be better. something like `$('#datetimepicker').datetimepicker(MY_DEFAULTS).setMinNow()`, that will set the change handler, would be the least pain. But I don't know how can I extend the datetimepicker itself. I would suggest adding relative-to-now max/min date as a PR, my previous jqueryUI datepicker supports it – user3599803 Aug 20 '16 at 18:12
0

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

 $( '#Field_ID' ).datepicker({dateFormat: 'dd-MM-yy', minDate : new Date()});
Stephen Rauch
  • 47,830
  • 31
  • 106
  • 135
Sheri Bgh
  • 41
  • 1