@voytenkodev/react-datepicker NPM

React DatePicker

Simple datepicker on React

npm.io

Installation

npm install @voytenkodev/react-datepicker

Or via yarn:

yarn add @voytenkodev/react-datepicker

import { useState } from 'react'
import { CalendarPicker } from '@voytenkodev/react-datepicker'
// if need a default styles
import '@voytenkodev/react-datepicker/dist/style.css'

function App() {
	const [date, setDate] = useState<Date>();
	
	return (
		<CalendarPicker value={date} onChange={setDate} />
	)
}

Use with react-hook-form

import { CalendarPicker } from 'react-datepicker'
import { useFormContext, Controller } from 'react-hook-form'
// if need a default styles
import '@voytenkodev/react-datepicker/dist/style.css'

function App() {
        const { control } = useFormContext()
	return (
            <Controller
                control={control}
                render={({ field: { onChange, value }}) => (
                <CalendarPicker
                    value={value}
                    onChange={onChange}
                />
            )}
            name={'your-key'}
        />
	)
}

Property	type	Values	Description
locale	string	"en", "ru", "fr"	Changed language and day of started week. Default: en
type	String	"month", "full"	Type of returned date (when type of month, days is not show)
onChange*	Date	any date	Returned date or null (if reset)
showFormat	string	DD.MM.YYYY, YYYY/MM/DD	Show format in calendar, but returned anyway date
value*	Date	any date	undefined	Show date or placeholder
placeholder	string	any string	default placeholder it's returnedFormat
globalStyles	CSSProperties	any styles	Styles for global container
calendarStyles	CSSProperties	any styles	Styles for calendar container
mainColor	string	any color	Color is active date. Default: #2F8DB3
min	string	none, "2024-04-12"	Min date for select. Default: none
max	string	none, "2024-05-12"	Max date for select. Default: none