Only display 1 date when same start and end date is the same

[lassemt]

This might already be a feature that is supported, but I didn't find any information on it.

When using one element and range picker, the output will be more clear if it only shows one date without a delimiter, when 1 day is selected. Now it shows YYYY-MM-DD - YYYY-MM-DD when YYYY-MM-DD === YYYY-MM-DD. It would be nice to be able to show YYYY-MM-DD when the same day is selected for start and end date.

Describe alternatives you've considered I've havent found a quick work around for this yet, but would love to see suggestions. I was thinking something like this:

picker.on('selected', (date1, date2) => {
  if(date1.dateInstance === date2.dateInstance) {
    pickerInput.value = date1.howToOutPutSelectedFormat();
  }
});

But are a bit unsure how I can output the date in the format set for the picker..

Additional context Great library btw! It's the best JS datepicker I've tried so far in my 11 years as a developer 🖤

[lassemt]

Okay, so I figured out how to handle the format part, but it looks like input value is set after select event is emitted.

picker.on('selected', (date1, date2) => {
  if(date1.dateInstance.getTime() === date2.dateInstance.getTime()) {
    el.value = date1.format(picker.options.format, picker.options.lang);
  }
});

[wakirin]

Answered in PR #188

[lassemt]

@wakirin just a heads up. The above example did not work 😢

[wakirin]

You can do something like that:

https://jsfiddle.net/4dkocgjz/

Sorry, I do not plan include it in the core.

[lassemt]

You can do something like that:

https://jsfiddle.net/4dkocgjz/

Sorry, I do not plan include it in the core.

Ah yeah, that is definitly a better workaround than using setTimeout on deplaying value change. That will work for now, but I still believe this is more of a hack than a solution. The reason why I think it would be good to display one day instead of same day in range is that YYYY-MM-DD - YYYY-MM-DD when it's the same date, is a bit weird from a reading persepctive. So it would be an ehancement.

Anyway, this works. Thank you!