FEATURE: local dates range on click (PR #14355)

This PR is introducing 2 changes.

  1. Date popup is displayed on click instead on hover
  2. If the range is given then the whole range is always displayed for both startDate and endDate
  3. For range, short time is displayed for end if the range is < 24 hours


I wonder about errors if the DOM is not formated with the correct data attributes. Will it break rendering on the page if the attributes are missing or some format that can’t be parsed by moment? Do we need an exception handler?

Good point, I tried to crash it today. I realized that it can be even more bulletproof if we filter children to pick ones with date attribute. In that case,

or any other element between will not affect.

function _rangeElements(element) {
  return Array.from(element.parentElement.children).filter(
    (span) => span.dataset.date

.dataset is returning DomStringMap object which is forgivable domStringMap.fdsfdsfdsfds // => undefined so previous version was not crashing but didn’t display popup correctly.

Each individual date from date range is parsed individually and returns invalid date if something goes wrong.

My most comprehensive test example is:

- [date=2021-33-44 timezone="Australia/Sydney"] → <div>test</div>[date=2021-12-14 time=14:30 timezone="Australia/Sydney"]<div>test</div>

In that case, only second date is used for popup:

Excellent, thank you.