Local date range picker

Selects a range of local dates.

One important part is that it is local dates (according to your browser settings) we are handling. Both endpoints are included in the range, and it is up to you how you should interpret the selected range. Single local date can also be selected, in which case the endpoints are equal.

On the project page, NNM Local date range picker, you can read more details and the theory and background on the ideas and decisions.

Examples

Below are some examples and at the Local dates page you have even more.

No predefined local date range (default component)

Predefined local date range

Single day

Nearest months

Full years

Quarters and half years

Min/max defined

Min/max defined and predefined local date range

Optional slot for label

Calculating number of days for year-to-date

nnm-local-date-range-picker

Attributes

min-local-date

max-local-date

Optional. Format YYYY-MM-DD. Denotes min/max selectable local dates.

selected-from-local-date

selected-to-local-date

Optional. Format YYYY-MM-DD. Indicates the starting/ending local dates for a currently selected range.

Slots

[default]

Optional. Will be displayed as a label in the popup modal.

Emits

local-date-range-selected

Emitted when either Apply button, Clear icon or Quick list button is clicked. Event details contains properties:

• selectedLocalDateRange. Format "YYYY-MM-DD,YYYY-MM-DD" or null.
• selectedFromLocalDate. Format YYYY-MM-DD or null.
• selectedToLocalDate. Format YYYY-MM-DD or null.
• numberOfDays. Non-negative integer.

Keys

The following keys are active when the modal is open.

ESC

Closes modal.

Changing displayed months

a

Goto first month (if min-local-date defined).

s

Goto previous month.

d

Goto next month.

f

Goto last month (if max-local-date defined).

Centering specific months

e

Center current month.

r

"Center" the selected range. Tries to show as much as possible of the range, and also tries to minimize the distance to current month.

Modifying selected range

Note: These keys are disabled when implicit min/max mode is used.

Shift + ArrowLeft

Move "selected from date" one day to the left (increases range).

Shift + ArrowRight

Move "selected from date" one day to the right (decreases range).

ArrowLeft

Move "selected range" one day to the left, i.e. one day earlier.

ArrowRight

Move "selected range" one day to the right, i.e. one day later.

Alt + ArrowLeft

Move "selected to date" one day to the left (decreases range).

Alt + ArrowRight

Move "selected to date" one day to the right (increases range).

Shift + ArrowUp

Move "selected range" seven days to the left, i.e. one week earlier.

Shift + ArrowDown

Move "selected range" seven days to the right, i.e. one week later.

Expanding/shrinking selected range

Note: These keys are disabled when implicit min/max mode is used.

q

Shrinking range, if possible. The range may be shrinked to half year, quarter, month, week and original value. You can not go lower than your original value.

w

Expanding range, if possible. The range may be expanded to week, month, quarter, half year and year. If you have selected 16 April 2022:

• One click ⇒ 11 April - 17 April (week)
• Two clicks ⇒ 1 April - 30 April (month)
• Three clicks ⇒ 1 April - 30 June (Q2)
• Four clicks ⇒ 1 January - 30 June (H1)
• Five clicks ⇒ 1 January - 31 December (Year 2022)

Example ranges that are supported in the current version

• Tue 12 October - Wed 3 November (23 days)
• Tue 12 October 2021 - Sun 3 April 2022 (174 days)
• Sun 4 May
• Sun 23 June [Tomorrow]
• November (30 days)
• Current week (7 days)
• ±3 days (7 days)
• Wed 1 May - Fri 31 May (31 days) [Current month]
• Mon 1 June - Sun 7 June (7 days) [Previous week]
• Fri 1 April 2022 - Thu 30 June 2022 (91 days) [Q2]
• Fri 1 January - Fri 31 December (365 days) [Year 2021]

Project page

• NNM Local date range picker