javascript date picker responsive mode

You can use the cellWidth property (cellWidth: "Auto") to set the Navigator to fill the available width. The cell width will be calculated automatically. This mode can be used in scenarios when you need to adjust the width automatically as the page scales down.

In this mode, the width of the parent element must be set explicitly (the date picker content will not stretch it).

Available since version 2023.3.5679.

Online demo

This demo displays a Navigator and a Calendar component in two columns, utilizing display: "flex" for the parent element and flex: 20% and flex: 80% for the respective columns:

JavaScript

const datepicker = new DayPilot.Navigator("nav", {
  cellWidth: "Auto",
  // ...
});
datepicker.init();