1.0.4 • Published 10 months ago
tuo-date-picker v1.0.4
tuo-date-picker (react)
react date-picker
Screenshot
Development
npm install
yarn install
npm run dev
yarn devInstall
npm install tuo-date-picker
yarn add tuo-date-pickerUsage
const [date, setDate] = useState<Date>(new Date());
return (
<datePicker
selectedDate={date}
onDateChange={setDate}
/>
)API
DatePicker props
| 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 |