Range Presets

Offer ready-made ranges such as Last 7 days next to the calendar with @pglejzer/datepicker-ui.

Docked

calendar.range.presets is a list of { label, value }. value is a { start, end } pair or a function that returns one. The picker calls the function each time it refreshes, so "Today" stays current. In a docked picker the presets are a column beside the calendar when there is room, and a row of chips otherwise.

Docked presets

Date

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4const daysAgo = (days) => {
5  const date = new Date();
6  date.setDate(date.getDate() - days);
7  return date;
8};
9
10const presets = [
11  { label: "Today", value: () => ({ start: new Date(), end: new Date() }) },
12  { label: "Last 7 days", value: () => ({ start: daysAgo(6), end: new Date() }) },
13  { label: "Last 30 days", value: () => ({ start: daysAgo(29), end: new Date() }) },
14  {
15    label: "This month",
16    value: () => {
17      const now = new Date();
18      return {
19        start: new Date(now.getFullYear(), now.getMonth(), 1),
20        end: new Date(now.getFullYear(), now.getMonth() + 1, 0),
21      };
22    },
23  },
24  {
25    label: "Last month",
26    value: () => {
27      const now = new Date();
28      return {
29        start: new Date(now.getFullYear(), now.getMonth() - 1, 1),
30        end: new Date(now.getFullYear(), now.getMonth(), 0),
31      };
32    },
33  },
34];
35
36new DatepickerUI("#dates", {
37  calendar: { mode: "range", range: { presets } },
38  ui: { displayMode: "docked" },
39}).create();

#

In a modal the presets are a row of chips. Clicking one picks the range and follows behavior.closeOnSelect and behavior.commitOnChange. The accessible name of the group is labels.presets.

Modal presets

Date

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4const daysAgo = (days) => {
5  const date = new Date();
6  date.setDate(date.getDate() - days);
7  return date;
8};
9
10const presets = [
11  { label: "Today", value: () => ({ start: new Date(), end: new Date() }) },
12  { label: "Last 7 days", value: () => ({ start: daysAgo(6), end: new Date() }) },
13  { label: "Last 30 days", value: () => ({ start: daysAgo(29), end: new Date() }) },
14  {
15    label: "This month",
16    value: () => {
17      const now = new Date();
18      return {
19        start: new Date(now.getFullYear(), now.getMonth(), 1),
20        end: new Date(now.getFullYear(), now.getMonth() + 1, 0),
21      };
22    },
23  },
24  {
25    label: "Last month",
26    value: () => {
27      const now = new Date();
28      return {
29        start: new Date(now.getFullYear(), now.getMonth() - 1, 1),
30        end: new Date(now.getFullYear(), now.getMonth(), 0),
31      };
32    },
33  },
34];
35
36new DatepickerUI("#dates", {
37  calendar: { mode: "range", range: { presets } },
38  ui: { displayMode: "modal" },
39}).create();

Docs: Selection Modes · Options