DatePickerPropsBase

type DatePickerPropsBase = {
  canSelectPastDates?: boolean;
  dateRange?: DateRange;
  disableBackwardNavigation?: boolean;
  disableForwardNavigation?: boolean;
  disablePastMonths?: boolean;
  dots?: {
    blueDotDates?: Date[];
    greenDotDates?: Date[];
    greyDotDates?: Date[];
    redDotDates?: Date[];
    yellowDotDates?: Date[];
  };
  isDisabled?: boolean;
  isExpanded?: boolean;
  isMultiSelect?: boolean;
  isRangeDate?: boolean;
  markSundayRed?: boolean;
  onDateChange?: (date: Date) => void;
  onDatesChange?: (dates: Date[]) => void;
  onMonthChange?: (month: Date) => void;
  onRangeChange?: (dateRange: DateRange) => void;
  redDays?: Date[];
  selectedDate?: Date;
  selectedDates?: Date[];
  selectedMonth?: Date;
  selectWeek?: boolean;
  shouldDisableDate?: (date: Date) => boolean;
  showDaysOutsideMonth?: boolean;
  strikeThroughDates?: Date[];
  weekNumbers?: boolean;
};

Properties

Property	Type	Description
`canSelectPastDates?`	`boolean`	This boolean determines if the date picker will be able to select a past date. Default value should be false.
`dateRange?`	`DateRange`	-
`disableBackwardNavigation?`	`boolean`	If true, the left chevron (backward navigation) will be disabled, preventing the user from navigating to previous months.
`disableForwardNavigation?`	`boolean`	If true, the right chevron (forward navigation) will be disabled, preventing the user from navigating to future months.
`disablePastMonths?`	`boolean`	If true, the user can’t navigate past the current month.
`dots?`	{ `blueDotDates?`: `Date`[]; `greenDotDates?`: `Date`[]; `greyDotDates?`: `Date`[]; `redDotDates?`: `Date`[]; `yellowDotDates?`: `Date`[]; }	This will add a dot under the datecell.
`dots.blueDotDates?`	`Date`[]	-
`dots.greenDotDates?`	`Date`[]	-
`dots.greyDotDates?`	`Date`[]	-
`dots.redDotDates?`	`Date`[]	-
`dots.yellowDotDates?`	`Date`[]	-
`isDisabled?`	`boolean`	Disables the Datepicker.
`isExpanded?`	`boolean`	This bool will determine if the datepicker should be expanded or collapsed.
`isMultiSelect?`	`boolean`	When set to true, the date picker allows selecting multiple specific dates. Clicking a date toggles it in or out of the `selectedDates` array.
`isRangeDate?`	`boolean`	-
`markSundayRed?`	`boolean`	Optional. When set to true, all Sundays will be marked as red.
`onDateChange?`	(`date`: `Date`) => `void`	A callback function called when the user changes the date.
`onDatesChange?`	(`dates`: `Date`[]) => `void`	A callback function called when the user toggles a date in multi-select mode. It receives the updated array of selected dates.
`onMonthChange?`	(`month`: `Date`) => `void`	A callback function called when the user changes the month.
`onRangeChange?`	(`dateRange`: `DateRange`) => `void`	-
`redDays?`	`Date`[]	Array of dates that will be highlighted in the date picker that are marked red.
`selectedDate?`	`Date`	The currently selected date.
`selectedDates?`	`Date`[]	The currently selected specific dates when using multi-select. Each date in the array is highlighted using the active date style.
`selectedMonth?`	`Date`	The initially selected month.
`selectWeek?`	`boolean`	Determines if selecting a date should also select the entire week. When set to `true`, choosing a date within the datepicker will result in the entire week (row) being selected. If set to `false` or left undefined, only the individual date will be selected.
`shouldDisableDate?`	(`date`: `Date`) => `boolean`	Prop `shouldDisableDate` is a function that determines if specific dates in the DatePicker should be disabled. Dates for which this function returns true will be unselectable; if it returns false, they remain selectable.
`showDaysOutsideMonth?`	`boolean`	This will show days outside the selected month, default value is false. Since we only should render days outside the selected month, if that is required in the design or use of the datepicker. We are not using the weekNumber then we should not render the days outside month.
`strikeThroughDates?`	`Date`[]	Optional. An array of upcoming dates to be struck through (disabled) in the date picker. These dates will be disabled and the user won’t be able to select them.
`weekNumbers?`	`boolean`	This will show week number, default value should be false.