tuo-date-picker (react)

react date-picker

Screenshot

light-calendar

npm install
yarn install

npm run dev
yarn dev

npm install tuo-date-picker
yarn add tuo-date-picker

const [date, setDate] = useState<Date>(new Date());

return (
  <datePicker
    selectedDate={date}
    onDateChange={setDate}
  />
)

name	description	type	defalut
language	language of header and day text	'en' / 'ko' / 'zh'	'en'
selectedDate	currently selected date	Date
onDateChange	changing selectedDate when selecting a date	(date:Date) => void
disableDateClick	disable selecting a date	boolean	false
disableFuture	disable moving to future months from the current month	boolean	false
containerSize	size of the container including the header and calendar	{width: string, height: string}	{width: '100%', height: '100%'}
cellSize	width and height of the selection area and today's date area (px)	number	40
cellColor	background color of each of the selection area and today's date area	{today: stirng, selected: string}	{today: '#EDEDED', selected: '#ADD8E6'}
selectedFontColor	font color of the selected date	string	'#333333'
classNames	additional css class of calendar container and the cell for day and date	{contanier: stirng, day?: string, current?: string, date?: string, differentMonth?: string, sunday?: string, future?: string}
customHeader	customize the header	(dateText: string, handleMonth: (direction: 'prev'	'next') => void, clickToday: () => void, futureDisabled: boolean) => JSX.Element