CODEWITHSUNDEEP
javascriptjquerydatetimepicker
Jonno_FTW
Jonno_FTW

Reputation: 8809

jQuery datetimepicker plugin range bug

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);
    },
});

Upvotes: 1

Views: 2765

Answers (1)

Hosny Ben
Hosny Ben

Reputation: 136

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',
 });
});

Upvotes: 8

Related Questions