Props

React select is built on top of typescript and therefore there is full support for typescript.

lang?
  • Type:ILang
  • Default: np
  • Description: Sets the display language of datepicker.
type?
  • Type:IDatePickerType
  • Default: BS
  • Description: Sets the calendar type of datepicker.
min?
  • Type:NepaliDate | Date
  • Description: Minimum date that can be selected.
max?
  • Type:NepaliDate | Date
  • Description: Maximum date that can be selected.
format?
  • Type:string
  • Default: YYYY-MM-DD
  • Description: Allows you to customize the display format of the selected date. To know more about the format, please refer to format api documentation here.
open?
  • Type:boolean | undefined
  • Default: false
  • Description: Controls the visibility of the datepicker menu.
disabled?
  • Type:boolean
  • Description: Disables the Datepicker component when set to true.
showclear?
  • Type:boolean
  • Description: Displays a clear button for clearing selected value.
suffixRender?
  • Type:(value: ISuffixRender) => ReactNode
  • Description: Allows customizing the appearance of the suffix area in the Datepicker component.
components?
  • Type:IComponents
  • Description: Allows customizing the individual components of the datepicker.
converterMode?
  • Type:boolean
  • Default: false
  • Description: Sets whether the datepicker be used as date converter between AD and BS. This will set the limits on date for both AD and BS.
className?
  • Type:string | (() => { focus?: string; disabled?: string; default?: string })
  • Description: CSS classes for customizing Datepicker input field.
portalClassName?
  • Type:string
  • Description: CSS classes for the portal element.
menuContainerClassName?
  • Type:string
  • Description: CSS classes for the menu container of the Datepicker component.
calendarClassName?
  • Type:string
  • Description: CSS classes for the inner calendar container of the Datepicker component.
animation?
  • Type:null | AnimationProps(FramerMotion animation props)
  • Description: Configures animations for the dropdown menu. When set null, disables the animation.
onChange?
  • Type:(value: NepaliDate | Date | string | null) => void
  • Description: Triggered upon changes to the selected value.

Types

Various types used in above props.

export type ISuffixRender = (props: {
  onClear: () => void;
  isOpen: boolean;
  showclear: boolean;
}) => ReactNode;

export type IDatePickerType = 'BS' | 'AD';

export type ILang = 'np' | 'en';

export type IComponents = {
  footer?: (props: {
    onTodayClick: () => void;
    todayText: string;
  }) => ReactNode;
  header?: (props: {
    prevClick: () => void;
    nextClick: () => void;
    onMonthSelectClicked: () => void;
    onYearSelectClicked: () => void;
    prevDisabled: boolean;
    nextDisabled: boolean;
    selectionMode: 'day' | 'year' | 'month';
    monthText: string;
    monthNumber: number;
    yearNumber: number;
    yearText: string;
    yearRange: { start: number; end: number };
    yearRangeText: string;
  }) => ReactNode;
  date?: (props: {
    onClick: () => void;
    dateMonthType: 'current' | 'prev' | 'next';
    month: number;
    year: number;
    isToday: boolean;
    isSelected: boolean;
    dateText: string | number;
    isDisabled: boolean;
    weekDay: number;
  }) => ReactNode;
  year?: (props: {
    onClick: () => void;
    yearText: string | number;
    yearNumber: number;
    isDisabled: boolean;
  }) => ReactNode;
  month?: (props: {
    onClick: () => void;
    monthText: string | number;
    monthNumber: number;
    year: number;
    isDisabled: boolean;
  }) => ReactNode;
  week?: (props: { weekText: string; weekNumber: number }) => ReactNode;
};