انتخابگر تاریخ (Date Picker)

1"use client";
2
3import * as React from "react";
4import { DatePicker } from "@/components/ui/date-picker";
5
6export default function DatePickerDemo() {
7  const [date, setDate] = React.useState<Date>();
8
9  return (
10    <DatePicker
11      date={date}
12      onDateChange={setDate}
13      placeholder="انتخاب تاریخ"
14    />
15  );
16}

1"use client";
2
3import * as React from "react";
4import { addDays } from "date-fns";
5import type { DateRange } from "react-day-picker";
6import { DateRangePicker } from "@/components/ui/date-picker";
7
8export default function DateRangePickerDemo() {
9  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
10    from: new Date(),
11    to: addDays(new Date(), 7),
12  });
13
14  return (
15    <DateRangePicker
16      dateRange={dateRange}
17      onDateRangeChange={setDateRange}
18      placeholder="انتخاب بازه تاریخ"
19    />
20  );
21}

1"use client";
2
3import * as React from "react";
4import { addDays } from "date-fns";
5import { Calendar as CalendarIcon } from "lucide-react";
6import { cn } from "@/lib/utils";
7import { Button } from "@/components/ui/button";
8import { Calendar } from "@/components/ui/calendar";
9import {
10  Popover,
11  PopoverContent,
12  PopoverTrigger,
13} from "@/components/ui/popover";
14import {
15  Select,
16  SelectContent,
17  SelectItem,
18  SelectTrigger,
19  SelectValue,
20} from "@/components/ui/select";
21
22export default function DatePickerWithPresets() {
23  const [date, setDate] = React.useState<Date>();
24
25  return (
26    <Popover>
27      <PopoverTrigger asChild>
28        <Button
29          variant="outline"
30          className={cn(
31            "w-[280px] justify-start text-start font-normal",
32            !date && "text-muted-foreground"
33          )}
34        >
35          <CalendarIcon className="me-2 h-4 w-4" />
36          {date
37            ? date.toLocaleDateString("fa-IR")
38            : "انتخاب تاریخ"}
39        </Button>
40      </PopoverTrigger>
41      <PopoverContent className="flex w-auto flex-col gap-2 p-2">
42        <Select
43          onValueChange={(value) =>
44            setDate(addDays(new Date(), parseInt(value)))
45          }
46        >
47          <SelectTrigger>
48            <SelectValue placeholder="انتخاب سریع" />
49          </SelectTrigger>
50          <SelectContent position="popper">
51            <SelectItem value="0">امروز</SelectItem>
52            <SelectItem value="1">فردا</SelectItem>
53            <SelectItem value="3">سه روز بعد</SelectItem>
54            <SelectItem value="7">هفته آینده</SelectItem>
55          </SelectContent>
56        </Select>
57        <div className="rounded-md border border-border">
58          <Calendar mode="single" selected={date} onSelect={setDate} />
59        </div>
60      </PopoverContent>
61    </Popover>
62  );
63}
64
65// نکته: برای این مثال به کامپوننت Select نیاز دارید.
66// npx @quark-lab/rad-ui add select

1"use client";
2
3import * as React from "react";
4import { DatePicker } from "@/components/ui/date-picker";
5
6export default function DatePickerUsage() {
7  const [date, setDate] = React.useState<Date>();
8
9  return (
10    <DatePicker
11      date={date}
12      onDateChange={setDate}
13      placeholder="انتخاب تاریخ"
14    />
15  );
16}