Home
GitHub

Dates configuration

The dates configuration primarily governs the behavior of the core functionality - the calendar. Conversely, the appearance and visual aspects of the calendar are managed by the calendar configuration.

The dates configuration takes the following structure:

interface DPDatesUserConfig {
  mode?: 'single' | 'multiple' | 'range';
  minDate?: Date;
  maxDate?: Date;
  selectSameDate?: boolean;
  toggle?: boolean;
  limit?: number;
}
interface DPDatesUserConfig {
  mode?: 'single' | 'multiple' | 'range';
  minDate?: Date;
  maxDate?: Date;
  selectSameDate?: boolean;
  toggle?: boolean;
  limit?: number;
}

mode

The mode property determines the behavior of the date picker concerning days and offers three potential values:

  • single: Enables selection of only one date.
  • multiple: Permits selection of an unlimited number of dates until a limit is specified.
  • range: Allows selection of a date range. The selectedDates will contain two dates denoting the range.

Default vaule: single

minDate and maxDate

The minDate and maxDate properties set limits on selectable dates, months, and years:

  • minDate: All dates preceding the minDate in the prop-getters will be disabled.
  • maxDate: All dates succeeding the maxDate in the prop-getters will be disabled.

⚠️ Note: If minDate > NOW, the initial calendar will display the month containing minDate. Similarly, if maxDate < NOW, the initial calendar will show the month containing maxDate.

selectSameDate

This boolean option permits the selection of the same date in range mode.

toogle

This boolean option enables the unselection of dates in all modes.

limit

This setting specifies the maximum number of dates a user can select in the multiple mode.

ConfigurationCalendar