Select Mode

The Navigator date picker supports the following date range selection modes:

• Day

• Week

• Month

The selection mode determines what date range will be selected when a user clicks a date:

• the start and end properties of the selection (onTimeRangeSelected event) will be calculated accordingly

• the selected period will be highlighted

You can also enable a free-hand selection mode in addition to the default mode (freeHandSelectionEnabled property).

Examples

SelectMode = Day

SelectMode = Week

SelectMode = Month

JavaScript Date Picker

In the JavaScript date picker, use the selectMode property to choose the selection mode:

<div id="nav"></div>

<script>

  const nav = new DayPilot.Navigator("nav", {
    // ...
    selectMode: "Week"
  });

  nav.init();

</script>

Select a Custom Date Range

Enable freeHandSelectionEnabled to let users drag across several dates. A single click still uses selectMode.

<div id="nav"></div>
<script>
const nav = new DayPilot.Navigator("nav", {
  startDate: "2026-10-01",
  freeHandSelectionEnabled: true,
  onTimeRangeSelected: args => {
    console.log(args.start.toString(), args.end.toString());
  }
});
nav.init();

// Select October 12 through October 14 (inclusive).
nav.select("2026-10-12", "2026-10-14");
</script>

The second date passed to select() is inclusive. The callback's args.end is exclusive: the example reports October 15 as the end of the selected range.

Preserving the Range During Updates

In DayPilot Pro since 2026.3.7063, update() and framework redraws preserve a freehand range when the selection settings have not changed. Refreshing event data or changing an unrelated option does not reset the range to the default day, week or month, and does not trigger another onTimeRangeSelected callback. This also applies to ranges set with select(start, end).

Changing selection settings, such as selectionDay or selectMode, deliberately changes the selection. For integration examples, see the Angular, React and Vue date picker guides.