Datetime Year Range

1"use client";
2import React from "react";
3import { DateTimePicker } from "@/components/ui/datetime-picker";
4import { Label } from "@/components/ui/label";
5 
6const DatetimePickerYearRange = () => {
7  const [date, setDate] = React.useState<Date | undefined>(undefined);
8 
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>± 3 Years</Label>
13        <DateTimePicker yearRange={3} value={date} onChange={setDate} />
14      </div>
15      <div className="flex w-72 flex-col gap-2">
16        <Label>± 10 Years</Label>
17        <DateTimePicker yearRange={10} value={date} onChange={setDate} />
18      </div>
19      <div className="flex w-72 flex-col gap-2">
20        <Label>± 30 Years</Label>
21        <DateTimePicker yearRange={30} value={date} onChange={setDate} />
22      </div>
23    </div>
24  );
25};
26 
27export default DatetimePickerYearRange;