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

Examples

SelectMode = Day

javascript html5 date picker navigator select mode day

SelectMode = Week

javascript html5 date picker navigator select mode week

SelectMode = Month

javascript html5 date picker navigator select mode 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>