1 | import React, { useState } from "react";
|
2 |
|
3 | import { format } from "date-fns";
|
4 | import { DayPicker } from "react-day-picker";
|
5 |
|
6 | export function AccessibleDatePicker() {
|
7 | const [meetingDate, setMeetingDate] = useState<Date | undefined>(undefined);
|
8 | return (
|
9 | <DayPicker
|
10 | mode="single"
|
11 | onSelect={setMeetingDate}
|
12 | selected={meetingDate}
|
13 | labels={{
|
14 | labelDayButton: (date, modifiers) => {
|
15 | return modifiers.selected
|
16 | ? `Selected Meeting Date: ${format(date, "PPP")}`
|
17 | : "";
|
18 | }
|
19 | }}
|
20 | footer={
|
21 | meetingDate
|
22 | ? `Meeting date is set to ${format(meetingDate, "PPPP")}`
|
23 | : "Please pick a date for the meeting."
|
24 | }
|
25 | />
|
26 | );
|
27 | }
|