Date Picker

 1"use client";
 2
 3import * as React from "react";
 4import { DatePicker } from "@/components/wensity/date-picker";
 5
 6export function RangeDatePicker() {
 7  const [range, setRange] = React.useState<{ from?: Date; to?: Date }>();
 8
 9  return (
10    <DatePicker
11      mode="range"
12      value={range}
13      onChange={setRange}
14      placeholder="Select date range"
15    />
16  );
17}

 1"use client";
 2
 3import * as React from "react";
 4import { DatePicker } from "@/components/wensity/date-picker";
 5
 6export function MultipleDatePicker() {
 7  const [dates, setDates] = React.useState<Date[]>([]);
 8
 9  return (
10    <DatePicker
11      mode="multiple"
12      value={dates}
13      onChange={setDates}
14      placeholder="Pick dates"
15    />
16  );
17}

 1"use client";
 2
 3import * as React from "react";
 4import { DatePicker } from "@/components/wensity/date-picker";
 5
 6export function PresetDatePicker() {
 7  const [date, setDate] = React.useState<Date>();
 8
 9  return (
10    <DatePicker
11      value={date}
12      onChange={setDate}
13      presets={[
14        { label: "Today", getValue: () => new Date() },
15        { label: "Tomorrow", getValue: () => { const d = new Date(); d.setDate(d.getDate() + 1); return d; } },
16      ]}
17    />
18  );
19}

 1"use client";
 2
 3import * as React from "react";
 4import { DatePicker } from "@/components/wensity/date-picker";
 5
 6export function DateTimePicker() {
 7  const [date, setDate] = React.useState<Date>();
 8
 9  return (
10    <DatePicker
11      value={date}
12      onChange={setDate}
13      placeholder="Pick date & time"
14      dateTime
15    />
16  );
17}

 1"use client";
 2
 3import * as React from "react";
 4import { DatePicker } from "@/components/wensity/date-picker";
 5
 6export function MonthYearPicker() {
 7  const [date, setDate] = React.useState<Date>();
 8
 9  return (
10    <DatePicker
11      value={date}
12      onChange={setDate}
13      monthYear
14      presets={false}
15    />
16  );
17}