nazar-pc / PickMeUp

Really simple, powerful, customizable and lightweight standalone datepicker
BSD Zero Clause License
616 stars 191 forks source link

Allow ranges using two input fields instead of one #207

Closed multiwebinc closed 5 years ago

multiwebinc commented 5 years ago

I think it would be a good option to have to allow date ranges to use two separate input fields, one for each date, instead of just one single field with the values concatenated together. Basically when you select a value in one field, a second field's minimum date is updated based on the chosen value of the first field.

nazar-pc commented 5 years ago

Just subscribe to pickmeup-change event and store dates in any way you like. There are too many edge cases that can be added that will make library larger and even more complex. I would rather make it flexible enough that you can implement stuff like this on top of it.

multiwebinc commented 5 years ago

I guess you're right. It wasn't nearly as hard as I thought it would be. Here is what I did in case anyone else would find this useful (note using jQuery and moment.js):

var datepicker_link = ['#check-in','#check-out'];
$('.datepicker').each(function() {
  pickmeup(this, datepicker_options);
});
var datepicker_options = {};
$('.datepicker').each(function() {
  this.addEventListener('pickmeup-change', function (e) {
    if ('#' + $(this).attr('id') == datepicker_link[0]) {
      var options = datepicker_options;
      var new_date = moment(e.detail.date).add(1, 'days').toDate();
      if (pickmeup(datepicker_link[1]).get_date() <= e.detail.date) {
        options.date = new_date;
      }
      options.min = new_date;
      options.default_date = true;

      pickmeup(datepicker_link[1]).destroy();
      pickmeup(datepicker_link[1], options);
    }
  })
});