Datetime Picker Calendar Settings

1"use client";
2import React from "react";
3import { DateTimePicker } from "@/components/ui/datetime-picker";
4 
5const DatetimePickerCalendarSettings = () => {
6  const [date, setDate] = React.useState<Date | undefined>(undefined);
7 
8  return (
9    <div className="flex flex-col gap-3 lg:flex-row lg:gap-10">
10      <div className="w-72 space-y-2">
11        <p>Week start on Monday</p>
12        <DateTimePicker weekStartsOn={1} value={date} onChange={setDate} />
13      </div>
14      <div className="w-72 space-y-2">
15        <p>Show week number</p>
16        <DateTimePicker showWeekNumber value={date} onChange={setDate} />
17      </div>
18      <div className="w-72 space-y-2">
19        <p>Disable outside days</p>
20        <DateTimePicker
21          showOutsideDays={false}
22          value={date}
23          onChange={setDate}
24        />
25      </div>
26    </div>
27  );
28};
29 
30export default DatetimePickerCalendarSettings;