ReactJs Simple Datepicker and Range Datepcker using Modular DatePicker
ReactJs Simple Datepicker and Range Datepcker using Modular DatePicker
Venkat Nagaram
ReactJs Simple Datepicker and Range Datepcker using Modular DatePicker
Simple Datepicker
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
// write a facade-component const DatepickerSimple: FC<Props> = (props) => { const { selected = 0 as Timestamp, onSelect, } = props; // use hooks for manage states, e.g. switching a month const { currentMonthTimestamp, onPrevMonth, onNextMonth, } = useCalendarMonth(selected || Date.now() as Timestamp); return ( <Calendar // pass states and callbacks from logic hooks monthTimestamp={currentMonthTimestamp} onPrevMonth={onPrevMonth} onNextMonth={onNextMonth} > {(dayTimestamp) => ( <CalendarDay // highlight the selected day isSelected={selected === dayTimestamp} // select the clicked day onClick={() => onSelect(dayTimestamp)} > {/* display a date */} {(new Date(dayTimestamp)).getDate()} </CalendarDay> )} </Calendar> ); }; |
Datepicker with 2 calendars
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const BigDatepicker: FC<Props> = () => { ... return ( <> {/* 1st calendar */} <Calendar monthTimestamp={currentMonthTimestamp}> ... </Calendar> {/* 2nd calendar */} <Calendar monthTimestamp={nextMonthTimestamp}> ... </Calendar> </> ); }; |
Demo: https://faustienf.github.io/datepicker/?path=/story/datepicker-range–default
Download: https://github.com/faustienf/datepicker#simple-datepicker
