Nepali-react-datepicker NPM

React Nepali Datepicker

Install

npm i nepali-datepicker-react

yarn add nepali-datepicker-react

pnpm i nepali-datepicker-react

Usage

Provider usage

import { useDatePickerStore, selectEvents, selectCtx, disableTogglerAfterMaxEngDate, DatePickerStoreProvider, ModeEnum } from "nepali-datepicker-react";

<DatePickerStoreProvider props={{
        mode: ModeEnum.RANGE,
        closeOnSelect: false,
        startDate: "",
        endDate: "",
        showSecondaryDate: true
    }} >
        <div className="items-start flex flex-col gap-3">
            {...your_component}
        </div>
    </DatePickerStoreProvider>

Hook usage

import { zero_pad, DATE_NULLIFIER, selectCtx, selectEvents, useDatePickerStore } from "nepali-datepicker-react";

export const PickerBody = () => {
    const state = useDatePickerStore();

    const { gridDates, weeks, showSecondaryDate } = selectCtx(state)
    const { selectDay } = selectEvents(state)

    return ...
}

Props

Calendar Props

Prop Name	Type	Default	Description
startDate	startDate	--
endDate	endDate
disabledWeekDays	disabled	[]	This is the array of week days that is used to disable the week days in the calendar if value is 1,2,3 then sunday, monday and tuesday cells are disabled.
holidays	holidays	[]	This holds the holidays, based on this cells are disabled
isNepali	isNepali	false	This is used to determine if the calendar context is in nepali or english.
mode	mode	ModeEnum.SINGLE	This is the mode of the datepicker.
disableDateBefore	string	-	This is the date before which datepicker should be disabled.
disableDateAfter	string	-	This is the date after which datepicker should be disabled.
onChange	(date: string) => void \| undefined	undefined	This gets triggered when date changes.
onError	(date: string) => void	undefined	This gets triggered when there is an error.
isDisabled	boolean	false	This is the determine if input should be disabled or not.
isRhfBound	boolean	false	This is the determine if input should be bound with rhf or not.
showToggle	boolean	false	Determine if the is nepali toggle button should be shown or not.
closeOnSelect	boolean	false	Determine if the picker should be closed on day select.
showSecondaryDate	boolean	false	Determine if the secondary date should be shown or not.
showRangeMenu	boolean	false	Determine if the is range menu (this week, this month, etc...) should be shown or not.