Setting From and To Dates with Pickadate.js

Question

I am setting To and From dates with pickadate.js. I have it working based on a Code Pen example. The code I am using is below:

var from_$input = $('#CAT_Custom_649616, #CAT_Custom_649610').pickadate(),
    from_picker = from_$input.pickadate('picker');

var to_$input = $('#CAT_Custom_649617, #CAT_Custom_649611').pickadate(),
    to_picker = to_$input.pickadate('picker');


if ( from_picker.get('value') ) {
  to_picker.set('min', from_picker.get('select'));
}
if ( to_picker.get('value') ) {
  from_picker.set('max', to_picker.get('select'));
}


from_picker.on('set', function(event) {
  if ( event.select ) {
    to_picker.set('min', from_picker.get('select'))  ;  
  }
  else if ( 'clear' in event ) {
    to_picker.set('min', false);
  }
});
to_picker.on('set', function(event) {
  if ( event.select ) {
    from_picker.set('max', to_picker.get('select'));
  }
  else if ( 'clear' in event ) {
    from_picker.set('max', false);
  }
});

I want to take the code one step further than what the example does. When you set the From date it will disable the To dates that are before the From date. For example, if you set a From date of August 21 2015, in the To date field you can select August 21 2015 or later, nothing before. The same happens when you set the To date. You cannot select any From date after the To date.

The one issue is, if I set a From date as August 21, I can also select a To date of August 21. What I would like to achieve is the ability to disable the date selected in the respective From and To fields.

In other words, if I select August 21 as my From date, then the earliest date I can select in the To date field is August 22 and vice versa.

How would I modify my code to achieve this?

Please update this if you get the answer? I am also facing the same problem. — mable george, Nov 09 '15 at 06:18

score 0 · Answer 1 · answered Nov 09 '15 at 06:45

Try this out, it worked for me. I did only for to date.

var from_$input = $('#CAT_Custom_649616, #CAT_Custom_649610').pickadate(),
from_picker = from_$input.pickadate('picker');

var to_$input = $('#CAT_Custom_649617, #CAT_Custom_649611').pickadate(),
to_picker = to_$input.pickadate('picker');

if (from_picker.get('value')) {
    var checkIN = new Date($('#CAT_Custom_649616, #CAT_Custom_649610').val());
    checkIN.setDate(checkIN.getDate() + 1);
    var dateDateN = checkIN.getDate();
    var dateMonthN = checkIN.getMonth() + 1; //January is 0!
    var dateYearN = checkIN.getFullYear();
    to_picker.set('min', new Date(dateYearN, dateMonthN - 1, dateDateN + 1));
}

if (to_picker.get('value')) {
    //from_picker.set('max', to_picker.get('select'))
}
from_picker.on('set', function (event) {
    if (event.select) {
       // alert(from_picker.get('select'));
    var checkIN = new Date($('#CAT_Custom_649616, #CAT_Custom_649610').val());
    checkIN.setDate(checkIN.getDate() + 1);
    var dateDateN = checkIN.getDate();
    var dateMonthN = checkIN.getMonth() + 1; //January is 0!
    var dateYearN = checkIN.getFullYear();
    to_picker.set('min', new Date(dateYearN, dateMonthN - 1, dateDateN + 1));
    } else if ('clear' in event) {
        to_picker.set('min', false)
    }
})

Setting From and To Dates with Pickadate.js

1 Answers1