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.
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
Min/max defined and predefined local date range
Optional slot for label
Calculating number of days for year-to-date
Optional. Format YYYY-MM-DD. Denotes min/max selectable local dates.
Optional. Format YYYY-MM-DD. Indicates the starting/ending local dates for a currently selected range.
Optional. Will be displayed as a label in the popup modal.
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.
The following keys are active when the modal is open.
Changing displayed months
Goto first month (if
Goto previous month.
Goto next month.
Goto last month (if
Centering specific months
Center current month.
"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
Move "selected from date" one day to the left.
Move "selected from date" one day to the right.
Move "selected range" one day to the left.
Move "selected range" one day to the right.
Move "selected to date" one day to the left.
Move "selected to date" one day to the right.
Expanding/shrinking selected range
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.
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]