REACT DATEPICKER CRAFTED BY HACKERONE React Datepicker. A simple and reusable datepicker component for React. Installation. The package can be installed via NPM: npm install react-datepicker --save REACT DATEPICKER CRAFTED BY HACKERONE React Datepicker. A simple and reusable datepicker component for React. Installation. The package can be installed via NPM: npm install react-datepicker --save REACT DATEPICKER CRAFTED BY HACKERONE React Datepicker. A simple and reusable datepicker component for React. Installation. The package can be installed via NPM: npm install react-datepicker --save REACT DATEPICKER CRAFTED BY HACKERONE React Datepicker. A simple and reusable datepicker component for React. Installation. The package can be installed via NPM: npm install react-datepicker --save REACT DATEPICKER CRAFTED BY HACKERONE React Datepicker. A simple and reusable datepicker component for React. Installation. The package can be installed via NPM: npm install react-datepicker --save REACT DATEPICKER CRAFTED BY HACKERONE React Datepicker. A simple and reusable datepicker component for React. Installation. The package can be installed via NPM: npm install react-datepicker --save REACT DATEPICKER CRAFTED BY HACKERONE React Datepicker. A simple and reusable datepicker component for React. Installation. The package can be installed via NPM: npm install react-datepicker --save REACT DATEPICKER CRAFTED BY HACKERONE React Datepicker. A simple and reusable datepicker component for React. Installation. The package can be installed via NPM: npm install react-datepicker --save REACT DATEPICKER CRAFTED BY HACKERONE React Datepicker. A simple and reusable datepicker component for React. Installation. The package can be installed via NPM: npm install react-datepicker --save You need to enable JavaScript to run this app.
REACT DATEPICKER
Crafted by
Previous MonthNext Month
April 2020
Su
Mo
Tu
We
Th
Fr
Sa
29
30
31
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
1
2
REACT DATEPICKER
A simple and reusable datepicker component for React.
INSTALLATION
The package can be installed via NPM: npm install react-datepicker --save
Or by using Yarn:
yarn add react-datepicker Below are examples which also can be edited directly via the editor on the left side and will be rendered on the right.
EXAMPLES
* Default
* No Anchor Arrow
* Select Time
* Select Time Only
* Exclude Times
* Include Times
* Inject Specific Times * Specific Time Range * Custom date format
* Custom class name
* Custom calendar class name * Custom day class name * Custom time class name
* Today button
* Placeholder text
* Specific date range
* Min date
* Max date
* Date Range with disabled navigation shown
* Locale
* Locale with time
* Locale without global variables
* Exclude dates
* Highlight dates
* Highlight dates with custom class names and ranges
* Include dates
* Filter dates
* Date Range
* Disable datepicker * Disable keyboard navigation * Read only datepicker * Clear datepicker input * onBlur callbacks in console * Configure Popper Properties
* Portal version
* Inline portal version
* TabIndex
* Year dropdown
* Month dropdown
* Month dropdown short month * MonthYear dropdown * Year select dropdown
* Inline version
* Open to date
* Fixed height of Calendar * Display Week Numbers
* Custom input
* Multiple months
* Show previous months * Multiple months with year dropdown * Multiple months inline
* Children
* Calendar container * Get raw input value on change * Don't hide calendar on date selection
* Custom header
* Custom Day
* Input time
* Strict parsing
* Month Picker
* Range Month Picker
* Quarter Picker
* Range Quarter Picker * Calendar open state callbacks
* Custom time input
DEFAULT
() => {
const = useState(new Date());
return (
setStartDate(date)} /> );
};
() => {
const = useState(new Date()); return (
setStartDate(date)} /> );
};
NO ANCHOR ARROW
() => {
const = useState(new Date()); return (
showPopperArrow={false} selected={startDate} onChange={date => setStartDate(date)} />
);
};
() => {
const = useState(new Date()); return (
showPopperArrow={false} selected={startDate} onChange={date => setStartDate(date)} />
);
};
SELECT TIME
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} showTimeSelect
timeFormat="HH:mm"
timeIntervals={15}
timeCaption="time"
dateFormat="MMMM d, yyyy h:mm aa" />
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} showTimeSelect
timeFormat="HH:mm"
timeIntervals={15}
timeCaption="time"
dateFormat="MMMM d, yyyy h:mm aa" />
);
};
SELECT TIME ONLY
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} showTimeSelect
showTimeSelectOnly
timeIntervals={15}
timeCaption="Time"
dateFormat="h:mm aa" />
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} showTimeSelect
showTimeSelectOnly
timeIntervals={15}
timeCaption="Time"
dateFormat="h:mm aa" />
);
};
EXCLUDE TIMES
() => {
const = useState( setHours(setMinutes(new Date(), 30), 16) );
return (
selected={startDate} onChange={date => setStartDate(date)} showTimeSelect
excludeTimes={}
dateFormat="MMMM d, yyyy h:mm aa" />
);
};
() => {
const = useState( setHours(setMinutes(new Date(), 30), 16) );
return (
selected={startDate} onChange={date => setStartDate(date)} showTimeSelect
excludeTimes={}
dateFormat="MMMM d, yyyy h:mm aa" />
);
};
INCLUDE TIMES
() => {
const = useState( setHours(setMinutes(new Date(), 30), 16) );
return (
selected={startDate} onChange={date => setStartDate(date)} showTimeSelect
includeTimes={}
dateFormat="MMMM d, yyyy h:mm aa" />
);
};
() => {
const = useState( setHours(setMinutes(new Date(), 30), 16) );
return (
selected={startDate} onChange={date => setStartDate(date)} showTimeSelect
includeTimes={}
dateFormat="MMMM d, yyyy h:mm aa" />
);
};
INJECT SPECIFIC TIMES () => {
const = useState( setHours(setMinutes(new Date(), 30), 16) );
return (
selected={startDate} onChange={date => setStartDate(date)} showTimeSelect
timeFormat="HH:mm"
injectTimes={}
dateFormat="MMMM d, yyyy h:mm aa" />
);
};
() => {
const = useState( setHours(setMinutes(new Date(), 30), 16) );
return (
selected={startDate} onChange={date => setStartDate(date)} showTimeSelect
timeFormat="HH:mm"
injectTimes={}
dateFormat="MMMM d, yyyy h:mm aa" />
);
};
SPECIFIC TIME RANGE
() => {
const = useState( setHours(setMinutes(new Date(), 30), 17) );
return (
selected={startDate} onChange={date => setStartDate(date)} showTimeSelect
minTime={setHours(setMinutes(new Date(), 0), 17)} maxTime={setHours(setMinutes(new Date(), 30), 20)} dateFormat="MMMM d, yyyy h:mm aa" />
);
};
() => {
const = useState( setHours(setMinutes(new Date(), 30), 17) );
return (
selected={startDate} onChange={date => setStartDate(date)} showTimeSelect
minTime={setHours(setMinutes(new Date(), 0), 17)} maxTime={setHours(setMinutes(new Date(), 30), 20)} dateFormat="MMMM d, yyyy h:mm aa" />
);
};
CUSTOM DATE FORMAT
() => {
const = useState(new Date()); return (
dateFormat="yyyy/MM/dd" selected={startDate} onChange={date => setStartDate(date)} />
);
};
() => {
const = useState(new Date()); return (
dateFormat="yyyy/MM/dd" selected={startDate} onChange={date => setStartDate(date)} />
);
};
CUSTOM CLASS NAME
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} className="red-border" />
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} className="red-border" />
);
};
CUSTOM CALENDAR CLASS NAME () => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} calendarClassName="rasta-stripes" />
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} calendarClassName="rasta-stripes" />
);
};
CUSTOM DAY CLASS NAME () => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} dayClassName={date => getDate(date) < Math.random() * 31 ? "random" : undefined }
/>
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} dayClassName={date => getDate(date) < Math.random() * 31 ? "random" : undefined }
/>
);
};
CUSTOM TIME CLASS NAME () => {
const = useState(new Date()); let handleColor = time => { return time.getHours() > 12 ? "text-success" : "text-error"; };
return (
showTimeSelect
selected={startDate} onChange={date => setStartDate(date)} timeClassName={handleColor} />
);
};
() => {
const = useState(new Date()); let handleColor = time => { return time.getHours() > 12 ? "text-success" : "text-error"; };
return (
showTimeSelect
selected={startDate} onChange={date => setStartDate(date)} timeClassName={handleColor} />
);
};
TODAY BUTTON
() => {
const = useState(new Date()); return (
todayButton="Vandaag" selected={startDate} onChange={date => setStartDate(date)} />
);
};
() => {
const = useState(new Date()); return (
todayButton="Vandaag" selected={startDate} onChange={date => setStartDate(date)} />
);
};
PLACEHOLDER TEXT
; ; SPECIFIC DATE RANGE
() => {
const = useState(null); return (
selected={startDate} onChange={date => setStartDate(date)} minDate={new Date()} maxDate={addDays(new Date(), 5)} placeholderText="Select a date between today and 5 days in the future" />
);
};
() => {
const = useState(null); return (
selected={startDate} onChange={date => setStartDate(date)} minDate={new Date()} maxDate={addDays(new Date(), 5)} placeholderText="Select a date between today and 5 days in the future" />
);
};
MIN DATE
() => {
const = useState(null); return (
selected={startDate} onChange={date => setStartDate(date)} minDate={subDays(new Date(), 5)} placeholderText="Select a date after 5 days ago" />
);
};
() => {
const = useState(null); return (
selected={startDate} onChange={date => setStartDate(date)} minDate={subDays(new Date(), 5)} placeholderText="Select a date after 5 days ago" />
);
};
MAX DATE
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} maxDate={addDays(new Date(), 5)} placeholderText="Select a date before 5 days in the future" />
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} maxDate={addDays(new Date(), 5)} placeholderText="Select a date before 5 days in the future" />
);
};
DATE RANGE WITH DISABLED NAVIGATION SHOWN () => {
const = useState(null); return (
selected={startDate} onChange={date => setStartDate(date)} minDate={new Date()} maxDate={addMonths(new Date(), 5)} showDisabledMonthNavigation />
);
};
() => {
const = useState(null); return (
selected={startDate} onChange={date => setStartDate(date)} minDate={new Date()} maxDate={addMonths(new Date(), 5)} showDisabledMonthNavigation />
);
};
LOCALE
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} locale="en-GB"
placeholderText="Weeks start on Monday" />
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} locale="en-GB"
placeholderText="Weeks start on Monday" />
);
};
LOCALE WITH TIME
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} locale="pt-BR"
showTimeSelect
timeFormat="p"
timeIntervals={15}
dateFormat="Pp"
/>
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} locale="pt-BR"
showTimeSelect
timeFormat="p"
timeIntervals={15}
dateFormat="Pp"
/>
);
};
LOCALE WITHOUT GLOBAL VARIABLES () => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} locale={fi}
/>
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} locale={fi}
/>
);
};
EXCLUDE DATES
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} excludeDates={}
placeholderText="Select a date other than today or yesterday" />
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} excludeDates={}
placeholderText="Select a date other than today or yesterday" />
);
};
HIGHLIGHT DATES
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} highlightDates={}
placeholderText="This highlights a week ago and a week from today" />
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} highlightDates={}
placeholderText="This highlights a week ago and a week from today" />
);
};
HIGHLIGHT DATES WITH CUSTOM CLASS NAMES AND RANGES () => {
const = useState(new Date()); const highlightWithRanges = ; return (
selected={startDate} onChange={date => setStartDate(date)} highlightDates={highlightWithRanges} placeholderText="This highlight two ranges with custom classes" />
);
};
() => {
const = useState(new Date()); const highlightWithRanges = ; return (
selected={startDate} onChange={date => setStartDate(date)} highlightDates={highlightWithRanges} placeholderText="This highlight two ranges with custom classes" />
);
};
INCLUDE DATES
() => {
const = useState(null); return (
selected={startDate} onChange={date => setStartDate(date)} includeDates={}
placeholderText="This only includes today and tomorrow" />
);
};
() => {
const = useState(null); return (
selected={startDate} onChange={date => setStartDate(date)} includeDates={}
placeholderText="This only includes today and tomorrow" />
);
};
FILTER DATES
() => {
const = useState(null); const isWeekday = date => { const day = getDay(date); return day !== 0 && day !== 6; };
return (
selected={startDate} onChange={date => setStartDate(date)} filterDate={isWeekday} placeholderText="Select a weekday" />
);
};
() => {
const = useState(null); const isWeekday = date => { const day = getDay(date); return day !== 0 && day !== 6; };
return (
selected={startDate} onChange={date => setStartDate(date)} filterDate={isWeekday} placeholderText="Select a weekday" />
);
};
DATE RANGE
() => {
const = useState(new Date("2014/02/08")); const = useState(new Date("2014/02/10")); return (
<>
selected={startDate} onChange={date => setStartDate(date)} selectsStart
startDate={startDate} endDate={endDate}
/>
selected={endDate}
onChange={date => setEndDate(date)} selectsEnd
startDate={startDate} endDate={endDate}
minDate={startDate}
/>
);
};
() => {
const = useState(new Date("2014/02/08")); const = useState(new Date("2014/02/10")); return (
<>
selected={startDate} onChange={date => setStartDate(date)} selectsStart
startDate={startDate} endDate={endDate}
/>
selected={endDate}
onChange={date => setEndDate(date)} selectsEnd
startDate={startDate} endDate={endDate}
minDate={startDate}
/>
);
};
DISABLE DATEPICKER
() => {
const = useState(null); return (
selected={startDate} onChange={date => setStartDate(date)} disabled
placeholderText="This is disabled" />
);
};
() => {
const = useState(null); return (
selected={startDate} onChange={date => setStartDate(date)} disabled
placeholderText="This is disabled" />
);
};
DISABLE KEYBOARD NAVIGATION () => {
const = useState(null); return (
selected={startDate} onChange={date => setStartDate(date)} disabledKeyboardNavigation placeholderText="This has disabled keyboard navigation" />
);
};
() => {
const = useState(null); return (
selected={startDate} onChange={date => setStartDate(date)} disabledKeyboardNavigation placeholderText="This has disabled keyboard navigation" />
);
};
READ ONLY DATEPICKER () => {
const = useState(null); return (
selected={startDate} onChange={date => setStartDate(date)} placeholderText="This is readOnly" readOnly
/>
);
};
() => {
const = useState(null); return (
selected={startDate} onChange={date => setStartDate(date)} placeholderText="This is readOnly" readOnly
/>
);
};
CLEAR DATEPICKER INPUT () => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} isClearable
placeholderText="I have been cleared!" />
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} isClearable
placeholderText="I have been cleared!" />
);
};
ONBLUR CALLBACKS IN CONSOLE () => {
const = useState(null); const handleOnBlur = ({ target: { value } }) => { const date = new Date(value); if (isValid(date)) { console.log("date: %s", format(date, "dd/MM/yyyy")); } else {
console.log("value: %s", date); }
};
return (
key="example9"
selected={startDate} onChange={date => setStartDate(date)} onBlur={handleOnBlur} placeholderText="View blur callbacks in console" />
);
};
() => {
const = useState(null); const handleOnBlur = ({ target: { value } }) => { const date = new Date(value); if (isValid(date)) { console.log("date: %s", format(date, "dd/MM/yyyy")); } else {
console.log("value: %s", date); }
};
return (
key="example9"
selected={startDate} onChange={date => setStartDate(date)} onBlur={handleOnBlur} placeholderText="View blur callbacks in console" />
);
};
CONFIGURE POPPER PROPERTIES () => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} popperClassName="some-custom-class" popperPlacement="top-end" popperModifiers={{
offset: {
enabled: true,
offset: "5px, 10px" },
preventOverflow: {
enabled: true,
escapeWithReference: false, boundariesElement: "viewport" }
}}
/>
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} popperClassName="some-custom-class" popperPlacement="top-end" popperModifiers={{
offset: {
enabled: true,
offset: "5px, 10px" },
preventOverflow: {
enabled: true,
escapeWithReference: false, boundariesElement: "viewport" }
}}
/>
);
};
PORTAL VERSION
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} withPortal
/>
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} withPortal
/>
);
};
INLINE PORTAL VERSION () => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} inline
/>
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} inline
/>
);
};
Previous MonthNext Month April 2020
Su
Mo
Tu
We
Th
Fr
Sa
29
30
31
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
1
2
TABINDEX
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} tabIndex={1}
/>
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} tabIndex={1}
/>
);
};
YEAR DROPDOWN
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} showYearDropdown
dateFormatCalendar="MMMM" yearDropdownItemNumber={15} scrollableYearDropdown />
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} showYearDropdown
dateFormatCalendar="MMMM" yearDropdownItemNumber={15} scrollableYearDropdown />
);
};
MONTH DROPDOWN
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} showMonthDropdown
/>
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} showMonthDropdown
/>
);
};
MONTH DROPDOWN SHORT MONTH () => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} showMonthDropdown
useShortMonthInDropdown />
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} showMonthDropdown
useShortMonthInDropdown />
);
};
MONTHYEAR DROPDOWN
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} dateFormatCalendar={"MMM yyyy"} minDate={subMonths(new Date(), 6)} maxDate={addMonths(new Date(), 6)} showMonthYearDropdown />
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} dateFormatCalendar={"MMM yyyy"} minDate={subMonths(new Date(), 6)} maxDate={addMonths(new Date(), 6)} showMonthYearDropdown />
);
};
YEAR SELECT DROPDOWN () => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} peekNextMonth
showMonthDropdown
showYearDropdown
dropdownMode="select" />
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} peekNextMonth
showMonthDropdown
showYearDropdown
dropdownMode="select" />
);
};
INLINE VERSION
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} inline
/>
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} inline
/>
);
};
Previous MonthNext Month April 2020
Su
Mo
Tu
We
Th
Fr
Sa
29
30
31
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
1
2
OPEN TO DATE
() => {
const = useState(null); return (
selected={startDate} onChange={date => setStartDate(date)} openToDate={new Date("1993/09/28")} />
);
};
() => {
const = useState(null); return (
selected={startDate} onChange={date => setStartDate(date)} openToDate={new Date("1993/09/28")} />
);
};
FIXED HEIGHT OF CALENDAR () => {
const = useState(null); return (
selected={startDate} onChange={date => setStartDate(date)} fixedHeight
/>
);
};
() => {
const = useState(null); return (
selected={startDate} onChange={date => setStartDate(date)} fixedHeight
/>
);
};
DISPLAY WEEK NUMBERS () => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} showWeekNumbers
/>
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} showWeekNumbers
/>
);
};
CUSTOM INPUT
() => {
const = useState(new Date()); const ExampleCustomInput = ({ value, onClick }) => ( {value}
);
return (
selected={startDate} onChange={date => setStartDate(date)} customInput={} />
);
};
() => {
const = useState(new Date()); const ExampleCustomInput = ({ value, onClick }) => ( {value}
);
return (
selected={startDate} onChange={date => setStartDate(date)} customInput={} />
);
};
04/06/2020
MULTIPLE MONTHS
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} monthsShown={2}
/>
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} monthsShown={2}
/>
);
};
SHOW PREVIOUS MONTHS () => {
const = useState(new Date()); return (
selected={startDate} showPreviousMonths
onChange={date => setStartDate(date)} monthsShown={2}
/>
);
};
() => {
const = useState(new Date()); return (
selected={startDate} showPreviousMonths
onChange={date => setStartDate(date)} monthsShown={2}
/>
);
};
MULTIPLE MONTHS WITH YEAR DROPDOWN () => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} monthsShown={2}
showYearDropdown
/>
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} monthsShown={2}
showYearDropdown
/>
);
};
MULTIPLE MONTHS INLINE () => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} monthsShown={2}
inline
/>
);
};
() => {
const = useState(new Date()); return (
selected={startDate} onChange={date => setStartDate(date)} monthsShown={2}
inline
/>
);
};
Previous MonthNext Month April 2020
Su
Mo
Tu
We
Th
Fr
Sa
29
30
31
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
1
2
May 2020
Su
Mo
Tu
We
Th
Fr
Sa
26
27
28
29
30
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
1
2
3
4
5
6
CHILDREN
() => {
const = useState(new Date()); return (
setStartDate(date)}> Don't forget to check the weather!
