1

I am using the following jQuery plugin: https://github.com/xdan/datetimepicker to implement a start and end date, where the end cannot be before the start and the start cannot be after the end. My code is bellow, based off the example in the documentation (I need the time as well as date): http://xdsoft.net/jqplugins/datetimepicker/#range

The problem is that limits aren't being set. From the code I can see that https://github.com/xdan/datetimepicker/blob/master/jquery.datetimepicker.js#L509 requires the minDate and maxDate to have a -+ in front of them. Is this a bug or am I missing something?

var format = "Y-m-d H:i:s";
var startSelector = "input[type='datetime-picker'][name='start']";
var endSelector = "input[type='datetime-picker'][name='end']";
$(startSelector).datetimepicker( {
    format : format,
    onShow : function(ct) {
        var val =  $(endSelector).val();
        console.log('start max val: '+val);
        var opts = {
            formatDate : "Y-m-d",
            maxDate : val ? '+'+val.split(' ')[0] : false
        };
        this.setOptions(opts);
    },
});
$(endSelector).datetimepicker( {
    format : format,
    onShow : function(ct) {
        var val =  $(startSelector).val();
        console.log('end min val: '+val);
        var opts = {
            formatDate : "Y-m-d",
            minDate : val ? '-'+
                    val.split(' ')[0] : false
        };

        this.setOptions(opts);
    },
});
Jonno_FTW
  • 8,601
  • 7
  • 58
  • 90
  • 1
    The line you highlighted doesn't say that the `minDate` and `maxDate` are required to begin with `-+`. It's used to canonicalize the values _if_ they begin with those characters. There's code later on that uses the value, which might be the original setting if this code didn't replace it. – Barmar May 23 '14 at 03:40
  • Thanks, removing the `-+` fixed it. – Jonno_FTW May 23 '14 at 03:59

1 Answers1

8

You can use the default script http://xdsoft.net/jqplugins/datetimepicker/ but you should know that it work perfectly for the format Y/m/d.

If you want to change the format dont forget to put again your format next to the Min/Max date

here is an example of my script it work perfectly for any format:

jQuery(function(){
 jQuery('#date_timepicker_start').datetimepicker({
  format:'d/m/Y - H:i',
  onShow:function( ct ){
   this.setOptions({
    minDate:0,
    maxDate:jQuery('#date_timepicker_end').val()?jQuery('#date_timepicker_end').val():false,formatDate:'d/m/Y - H:i'
   })
  },
  timepicker:true,
  step : 60,
  lang: 'en',
 });
 jQuery('#date_timepicker_end').datetimepicker({
  format:'d/m/Y - H:i',
  onShow:function( ct ){
   this.setOptions({
    minDate:jQuery('#date_timepicker_start').val()?jQuery('#date_timepicker_start').val():false,formatDate:'d/m/Y - H:i'
   })
  },
  timepicker:true,
  step : 60,
  lang: 'en',
 });
});
Hosny Ben
  • 138
  • 1
  • 6
  • I found it helpful to add `value:jQuery('#date_timepicker_start').val(),` to the beginning of the #date_timepicker_end `this.setOptions` values right before `minDate` so that the end date range would auto-populate. Other than that, this solution worked great. – kayatela Jul 16 '15 at 23:42