Event date facet (DDFFORM-67)

[kasperg]

Link to issue

https://reload.atlassian.net/browse/DDFFORM-67

Description

This PR shows how date filtering should appear on content list pages. The PR consists of two parts:

1. Refactoring of the existing date calendar component to a date range component which shows both the form element and the Flatpickr calendar.
2. Extracting the JavaScript from the date range component to something that can be used by systems relying on the design system.

Please go through the individual commits for additional commentary.

Screenshot of the result

Additional comments or questions

I have added a few comments in the PR below.

[LasseStaus]

I think we should align it to the right and not left.
Maybe this is the correct change, not sure.

Suggested change

	now,
	animate: false,
	altInput: true,
	altFormat: "j. M Y",
	now,
	animate: false,
	altInput: true,
	altFormat: "j. M Y",
	position: "auto right",

[LasseStaus]

Placeholder værdi

Suggested change

	<input
	className="date-range__input"
	type="text"
	aria-label="Vælg dato"
	/>
	<input
	className="date-range__input"
	type="text"
	aria-label="Vælg dato"
	placeholder="Vælg dato"
	/>

[LasseStaus]

Comments reflect a mix of review on the design system, and the cms PR.

General suggestions

• I found this design for the date picker. I think that is favorable to the empty input so i feel we should add that.

• I added some comments for placeholder and position/alignment of the open flatpickr, aswell as possibility of showing 2 months in desktop.

• I think we it would be nice with a reset/clear button for this. A button with an X or some text that shows up left of the date filter.

Potential problematic behaviour

These are not things i think needs to change for now necessarily, but i wanted to highlight some of the flatpickr behaviour that could be problematic.

• There is no default display of a date. The input is empty, but we could display the current day and forward here since that is what it is showing.

• If i want to select a date_from, and not a date_to, this is hard. I have to select 1 date, move out of the box without select a range and click. If then i reopen it, the date picker is now expecting a date_to input from the previous interaction.

I am not sure how to prevent it from expecting a date_to on reopening.

• Related to above: If i again want to select a date_from, and not a date_to, i can also i double click a date. This activates a search with both a date_to and date_from.

1. I think this is not intuitive.
2. The filter-input is not diplaying this selection in the format of "Date_from TIL date_to" which i guess is expected.

One suggestion here could be to just handle this by checking if the same date was clicked twice, and then perform a Date_from without date_to search.

Suggestions

Perhabs most of this can be solved with some conditional checking in the current implementation. The date filtering works, but some of the current flatpickr functionality can be confusing.

An alternativ could be to display the date_from and date_to inputs above the calendar, which all would then be in one container that opened. Maybe in a readonly state. The point would be to reflect changes more intuitively to the user, but not sure if necessary.

Take what you wish from this. I think the reset button and individual comments are the most prevalent.

Also i am interested in knowing what made you not do it as a react app 👂

[LasseStaus]

I think it would be nice to use the functionality built in of displaying 2 months instead of one on desktop / when there is room for it.

Up to you

Suggested change

	window.flatpickrOptions = {
	now,
	window.flatpickrOptions = {
	now,
	showMonths={2}