I am using the following jQuery plugin: 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):

The problem is that limits aren't being set. From the code I can see that .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);
    },
});

I am using the following jQuery plugin: https://github./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/jqplugins/datetimepicker/#range

The problem is that limits aren't being set. From the code I can see that https://github./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);
    },
});

• javascript
• jquery
• datetimepicker

• 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 Commented May 23, 2014 at 3:40
• Thanks, removing the -+ fixed it. – Jonno_FTW Commented May 23, 2014 at 3:59

1 Answer 1

You can use the default script http://xdsoft/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',
 });
});