By default, the date picker displays one month:

navigator date picker one month

You can set the number of visible months using showMonths property.

Configuration Options

  • Additional months will be displayed below the first one - you can also switch the date picker to horizontal orientation.
  • You can also configure how many months with be skipped when changing the date picker view using "<" and ">" icons.

JavaScript Example

javascript navigator date picker number of months

In the JavaScript date picker, you can set the number of visible month using showMonths property:

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


  const nav = new DayPilot.Navigator("nav", {
    // ...
    showMonths: 2,
    skipMonths: 2