Datetime Picker Hour

1"use client";
2import React, { useState } from "react";
3import { DateTimePicker } from "@/components/ui/datetime-picker";
4import { Label } from "@/components/ui/label";
5 
6const DatetimePickerHourCycle = () => {
7  const [date12, setDate12] = useState<Date | undefined>(undefined);
8  const [date24, setDate24] = useState<Date | undefined>(undefined);
9  return (
10    <div className="flex flex-col gap-3 lg:flex-row">
11      <div className="flex w-72 flex-col gap-2">
12        <Label>12 Hour</Label>
13        <DateTimePicker hourCycle={12} value={date12} onChange={setDate12} />
14      </div>
15      <div className="flex w-72 flex-col gap-2">
16        <Label>24 Hour</Label>
17        <DateTimePicker hourCycle={24} value={date24} onChange={setDate24} />
18      </div>
19    </div>
20  );
21};
22 
23export default DatetimePickerHourCycle;