Date Time Picker

1import { Calendar } from "@/components/ui/calendar";
2import { cn } from "@/lib/utils";
3import { Ionicons } from "@expo/vector-icons";
4import { format } from "date-fns";
5import { enUS } from "date-fns/locale";
6import * as React from "react";
7import { Animated, Modal, Pressable, Text, View } from "react-native";
8 
9interface DateRange {
10  from: Date;
11  to: Date;
12}
13 
14interface TimeConfig {
15  minuteInterval?: 1 | 5 | 10 | 15 | 30;
16  minTime?: string;
17  maxTime?: string;
18  disabledTimes?: string[];
19}
20 
21interface DateTimePickerProps {
22  mode?: "single" | "range" | "datetime";
23  value?: Date | Date[] | DateRange;
24  onValueChange?: (value: Date | Date[] | DateRange | undefined) => void;
25  placeholder?: string;
26  disabled?: boolean;
27  className?: string;
28  showOutsideDays?: boolean;
29  disabledDates?: (date: Date) => boolean;
30  disableWeekends?: boolean;
31  fromDate?: Date;
32  toDate?: Date;
33  timeConfig?: TimeConfig;
34  firstDayOfWeek?: 0 | 1;
35  enableQuickMonthYear?: boolean;
36  variant?: "default" | "outline";
37  size?: "sm" | "md" | "lg";
38}
39 
40const isDateRange = (value: any): value is DateRange => {
41  return value && typeof value === "object" && "from" in value && "to" in value;
42};
43 
44const formatDisplayValue = (
45  value: Date | Date[] | DateRange | undefined,
46  mode: "single" | "range" | "datetime",
47  placeholder: string
48): string => {
49  if (!value) return placeholder;
50 
51  switch (mode) {
52    case "single":
53      if (value instanceof Date) {
54        return format(value, "PPP", { locale: enUS });
55      }
56      break;
57    case "datetime":
58      if (value instanceof Date) {
59        return format(value, "PPP 'at' HH:mm", { locale: enUS });
60      }
61      break;
62    case "range":
63      if (isDateRange(value)) {
64        const fromFormatted = format(value.from, "PP", { locale: enUS });
65        const toFormatted = format(value.to, "PP", { locale: enUS });
66        return `${fromFormatted} - ${toFormatted}`;
67      }
68      break;
69  }
70  return placeholder;
71};
72 
73const getInputIcon = (mode: "single" | "range" | "datetime") => {
74  switch (mode) {
75    case "datetime":
76      return "calendar-outline";
77    case "range":
78      return "calendar-outline";
79    default:
80      return "calendar-outline";
81  }
82};
83 
84const DateTimePicker = React.forwardRef<View, DateTimePickerProps>(
85  (
86    {
87      mode = "single",
88      value,
89      onValueChange,
90      placeholder = "Select date",
91      disabled = false,
92      className,
93      showOutsideDays = true,
94      disabledDates,
95      disableWeekends = false,
96// … truncated