expo-2k-datetime-picker 1.0.0

package/src/Calendar2k.types.ts

@@ -0,0 +1,40 @@
+export type Calendar2kModuleEvents = {
+  onChange: (params: ChangeEventPayload) => void;
+};
+
+export type ChangeEventPayload = {
+  value: string;
+};
+
+export type OnTapEventPayload = Record<string, never>;
+
+export type Calendar2kViewProps = {
+  onChangeDate?: (date: DateValueType) => void;
+  value?: DateValueType;
+  locales?: Intl.LocalesArgument;
+  mode?: "date" | "time" | "datetime";
+  color?: string;
+  min?: Date;
+  max?: Date;
+  disableDate?: (date: Date) => boolean;
+  placeholder?: string;
+  customTrigger?: (onToggle: () => void) => React.ReactNode;
+  disabled?: boolean;
+};
+
+export type DayColumnProps = {
+  label: string;
+  dayNumber: number;
+};
+
+export type DayProps = {
+  date: Date;
+};
+
+export type TimeType =
+  `${number}${number}:${number}${number}:${number}${number}`;
+
+export type TimeRangeType = { start: TimeType; end?: TimeType };
+export type DateRangeType = { start: Date; end?: Date };
+export type DateValueType = Date | DateRangeType | TimeType | TimeRangeType;
+export type DateStateType = Date | DateRangeType;

package/src/Calendar2kModule.ts

@@ -0,0 +1,9 @@
+import { NativeModule, requireNativeModule } from "expo";
+
+import { Calendar2kModuleEvents } from "./Calendar2k.types";
+
+declare class Calendar2kModule extends NativeModule<Calendar2kModuleEvents> {}
+
+export default requireNativeModule<Calendar2kModule>("Calendar2k");
+export type { DateValueType } from "./Calendar2k.types";
+export { default as Calendar2kView } from "./Calendar2kView";

package/src/Calendar2kModule.web.ts

@@ -0,0 +1,7 @@
+import { registerWebModule, NativeModule } from 'expo';
+
+import { Calendar2kModuleEvents } from './Calendar2k.types';
+
+class Calendar2kModule extends NativeModule<Calendar2kModuleEvents> {}
+
+export default registerWebModule(Calendar2kModule, 'Calendar2kModule');

package/src/Calendar2kView.tsx

@@ -0,0 +1,416 @@
+import * as React from "react";
+import { useMemo, useState } from "react";
+import { Modal, Pressable } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import ArrowButton from "./components/ArrowButton";
+import Backdrop from "./components/Backdrop";
+import DayLabel from "./components/DayLabel";
+import Icon from "./components/Icon";
+import SwipeIcon from "./components/SwipeIcon";
+import Time from "./components/Time";
+import TimeView from "./components/TimeView";
+import useCalendarDisclose from "./hooks/useCalendarDisclose";
+import { formatDate, formatMonth, getWeekDay } from "./libs/format";
+import getDayMatrix from "./libs/getDayMatrix";
+import getStyle from "./libs/getStyle";
+import isActive from "./libs/isActive";
+import { toHexColor } from "./libs/toHexColor";
+import { KText, KTouchableOpacity, KView } from "./ui";
+
+import {
+  DateStateType,
+  TimeType,
+  type Calendar2kViewProps,
+  type DateValueType,
+  type DayColumnProps,
+  type DayProps,
+} from "./Calendar2k.types";
+
+export default function Calendar2kView({
+  onChangeDate,
+  value,
+  locales,
+  color,
+  min,
+  max,
+  disableDate,
+  placeholder,
+  customTrigger,
+  mode = "datetime",
+  disabled,
+}: Calendar2kViewProps) {
+  color = toHexColor(color);
+
+  const isValueDate = value instanceof Date;
+  const isValueTime = typeof value === "string";
+  const isValueRange = !!value && !isValueDate && typeof value === "object";
+  const isValueDateRange = isValueRange && value.start instanceof Date;
+  const isValueTimeRange = isValueRange && typeof value.start === "string";
+
+  if (isValueTime || isValueTimeRange) mode = "time";
+
+  const modeHasTime = mode?.includes("time");
+  const modeHasDate = mode?.includes("date");
+
+  const { isOpen, onToggle } = useCalendarDisclose();
+
+  const [selectedDate, setSelectedDate] = useState<DateStateType>(() => {
+    if (!value) return new Date();
+
+    if (isValueDate) return value;
+
+    if (isValueTime) return new Date(`2026-05-30 ${value}`);
+
+    if (isValueTimeRange)
+      return {
+        start: new Date(`2026-05-30 ${value.start}`),
+        end: new Date(`2026-05-30 ${value.end}`),
+      };
+
+    return value as DateStateType;
+  });
+
+  const isStateDate = selectedDate instanceof Date;
+  const isDateRange =
+    !isStateDate &&
+    typeof selectedDate === "object" &&
+    selectedDate.start instanceof Date;
+
+  const [shortDate, setShortDate] = useState(() => {
+    if (isStateDate) return selectedDate;
+
+    return selectedDate.start;
+  });
+
+  const matrix = getDayMatrix(shortDate);
+
+  const weekDays = Array.from({ length: 7 }).map((_, i) =>
+    getWeekDay(new Date(2026, 4, 3 + i), locales),
+  );
+
+  const datetimeOuput = useMemo(() => {
+    if (customTrigger) return "";
+
+    if (!value) {
+      if (placeholder) return placeholder;
+
+      placeholder = "Select date and time";
+
+      if (mode === "date") return "Select date";
+      if (mode === "time") return "Select time";
+
+      return placeholder;
+    }
+
+    if (isValueDate) return formatDate(value, locales, mode);
+
+    if (isValueTime) return value;
+
+    if (isValueTimeRange)
+      return `${formatDate(new Date(`2026-05-30 ${value.start}`), locales, mode)} - ${formatDate(new Date(`2026-05-30 ${value.end}`), locales, mode)}`;
+
+    if (isValueDateRange) {
+      let date = formatDate(value.start as Date, locales, mode);
+
+      if (value.end)
+        date = date
+          .concat(" - ")
+          .concat(formatDate(value.end as Date, locales, mode));
+
+      return date;
+    }
+
+    return "Invalid date or time";
+  }, [value, locales, mode]);
+
+  const changeYear = async (year: number) =>
+    setShortDate((v) => new Date(year, v.getMonth(), v.getDate()));
+
+  const changeMonth = (nb: number) => async () =>
+    setShortDate(
+      (v) => new Date(v.getFullYear(), v.getMonth() + nb, v.getDate()),
+    );
+
+  const selectDate = (date: Date) => async () => {
+    const newDate = new Date(date);
+
+    if (isStateDate) {
+      if (modeHasTime) {
+        newDate.setHours(selectedDate.getHours());
+        newDate.setMinutes(selectedDate.getMinutes());
+      }
+
+      setSelectedDate(newDate);
+    } else {
+      const isBeforeStart = selectedDate.start.getTime() > newDate.getTime();
+
+      if (selectedDate.end || isBeforeStart) {
+        if (modeHasTime) {
+          newDate.setHours(selectedDate.start.getHours());
+          newDate.setMinutes(selectedDate.start.getMinutes());
+        }
+
+        setSelectedDate({ start: newDate, end: undefined });
+      } else {
+        if (modeHasTime) {
+          newDate.setHours(selectedDate.start.getHours());
+          newDate.setMinutes(selectedDate.start.getMinutes());
+        }
+
+        setSelectedDate((v) => ({ ...v, end: newDate }));
+      }
+    }
+  };
+
+  const changeTime =
+    (key: "h" | "min" = "h", endTime?: boolean) =>
+    async (time: number) => {
+      if (isStateDate) {
+        const date = new Date(selectedDate);
+
+        if (key === "h") date.setHours(time);
+        if (key === "min") date.setMinutes(time);
+
+        setSelectedDate(date);
+      } else if (isDateRange) {
+        if (selectedDate.end && endTime) {
+          const date = new Date(selectedDate.end);
+
+          if (key === "h") date.setHours(time);
+          if (key === "min") date.setMinutes(time);
+
+          setSelectedDate((v) => ({ ...v, end: date }));
+        } else if (selectedDate.start) {
+          const date = new Date(selectedDate.start);
+
+          if (key === "h") date.setHours(time);
+          if (key === "min") date.setMinutes(time);
+
+          setSelectedDate((v) => ({ ...v, start: date }));
+        }
+      }
+    };
+
+  const save = async () => {
+    let data: DateValueType = selectedDate;
+
+    if (isStateDate && isValueTime)
+      data = formatDate(selectedDate, locales, mode) as TimeType;
+
+    if (isDateRange && isValueTimeRange)
+      data = {
+        start: formatDate(selectedDate.start, locales, mode) as TimeType,
+        end: formatDate(selectedDate.end as Date, locales, mode) as TimeType,
+      };
+
+    onChangeDate?.(data);
+
+    onToggle();
+  };
+
+  function Day({ date }: DayProps) {
+    const active = isActive({ min, max, date, disableDate });
+
+    const style = getStyle({
+      date,
+      shortDate,
+      selectedDate,
+      color,
+      active,
+    });
+
+    return (
+      <KTouchableOpacity
+        paddingHorizontal={16}
+        paddingVertical={10}
+        alignItems="center"
+        justifyContent="center"
+        nativeProps={{ onPress: selectDate(date), disabled: !active }}
+        {...style.touchableOpacity}
+      >
+        <KText textAlign="center" fontSize={16} {...style.text}>
+          {date.getDate()}
+        </KText>
+      </KTouchableOpacity>
+    );
+  }
+
+  function DayColumn({ label, dayNumber }: DayColumnProps) {
+    return (
+      <KView rowGap={3} flex={1} alignItems="stretch">
+        <DayLabel color={color}>{label}</DayLabel>
+        <Day date={matrix[dayNumber][0]} />
+        <Day date={matrix[dayNumber][1]} />
+        <Day date={matrix[dayNumber][2]} />
+        <Day date={matrix[dayNumber][3]} />
+        <Day date={matrix[dayNumber][4]} />
+      </KView>
+    );
+  }
+
+  return (
+    <>
+      {customTrigger ? (
+        customTrigger(onToggle)
+      ) : (
+        <Pressable
+          onPress={onToggle}
+          disabled={disabled}
+          style={{
+            width: "100%",
+            borderWidth: 1,
+            borderColor: "#0003",
+            paddingHorizontal: 16,
+            paddingVertical: 10,
+            borderRadius: 8,
+            backgroundColor: "white",
+            flexDirection: "row",
+            gap: 10,
+            alignItems: "center",
+          }}
+        >
+          <>
+            <Icon mode={mode} />
+            <KText fontSize={16} color={value ? undefined : "#0007"}>
+              {datetimeOuput}
+            </KText>
+          </>
+        </Pressable>
+      )}
+      <Modal
+        animationType="slide"
+        visible={isOpen}
+        transparent
+        onRequestClose={onToggle}
+      >
+        <KView flex={1} justifyContent="flex-end">
+          {isOpen && <Backdrop onPress={onToggle} />}
+          <SafeAreaView
+            style={{
+              minHeight: modeHasDate ? 470 : 200,
+              backgroundColor: "white",
+              padding: 20,
+              gap: 16,
+            }}
+          >
+            <KView
+              flexDirection="row"
+              justifyContent={modeHasTime ? "space-between" : "flex-end"}
+              alignItems="center"
+            >
+              {modeHasTime && (
+                <KView
+                  flexDirection="row"
+                  justifyContent="space-between"
+                  alignItems="center"
+                  gap={8}
+                >
+                  <TimeView
+                    date={isStateDate ? selectedDate : selectedDate.start}
+                    onChangeHours={changeTime("h")}
+                    onChangeMinutes={changeTime("min")}
+                    showDate={modeHasDate}
+                    color={color}
+                  />
+                  {(selectedDate as any)?.end && (
+                    <>
+                      <KView width={10} borderWidth={2} borderColor={color} />
+                      <TimeView
+                        date={(selectedDate as any).end}
+                        onChangeHours={changeTime("h", true)}
+                        onChangeMinutes={changeTime("min", true)}
+                        showDate={modeHasDate}
+                        color={color}
+                      />
+                    </>
+                  )}
+                  <SwipeIcon color={color} />
+                </KView>
+              )}
+              <KTouchableOpacity
+                nativeProps={{ onPress: save }}
+                alignItems="center"
+                justifyContent="center"
+                borderWidth={3}
+                paddingHorizontal={14}
+                paddingVertical={14}
+                borderColor={color}
+              >
+                <KText fontSize={20} fontWeight="bold" color={color}>
+                  OK
+                </KText>
+              </KTouchableOpacity>
+            </KView>
+            <KView borderTopWidth={1} width="100%" borderColor={`${color}11`} />
+            {modeHasDate && (
+              <>
+                <KView
+                  flexDirection="row"
+                  justifyContent="space-between"
+                  alignItems="center"
+                >
+                  <ArrowButton
+                    color={color}
+                    onPress={changeMonth(-1)}
+                    direction="left"
+                  />
+                  <KView flexDirection="row" alignItems="center" gap={4}>
+                    <KText
+                      fontWeight="bold"
+                      fontSize={16}
+                      textTransform="capitalize"
+                      color={color}
+                      minWidth={100}
+                      textAlign="right"
+                    >
+                      {formatMonth(shortDate, locales)} -
+                    </KText>
+                    <KView
+                      height={40}
+                      backgroundColor={`${color}11`}
+                      paddingHorizontal={10}
+                      borderColor={`${color}11`}
+                      flexDirection="row"
+                      alignItems="center"
+                    >
+                      <Time
+                        length={1000}
+                        index={shortDate.getFullYear()}
+                        height={40}
+                        start={new Date().getFullYear() - 500}
+                        onScrollEnd={changeYear}
+                        color={color}
+                      />
+                      <SwipeIcon color={color} />
+                    </KView>
+                  </KView>
+                  <ArrowButton
+                    color={color}
+                    onPress={changeMonth(1)}
+                    direction="right"
+                  />
+                </KView>
+                <KView
+                  borderTopWidth={1}
+                  width="100%"
+                  borderColor={`${color}22`}
+                />
+                <KView flexDirection="row" flex={1}>
+                  <DayColumn label={weekDays[0]} dayNumber={6} />
+                  <DayColumn label={weekDays[1]} dayNumber={0} />
+                  <DayColumn label={weekDays[2]} dayNumber={1} />
+                  <DayColumn label={weekDays[3]} dayNumber={2} />
+                  <DayColumn label={weekDays[4]} dayNumber={3} />
+                  <DayColumn label={weekDays[5]} dayNumber={4} />
+                  <DayColumn label={weekDays[6]} dayNumber={5} />
+                </KView>
+              </>
+            )}
+          </SafeAreaView>
+        </KView>
+      </Modal>
+    </>
+  );
+}
+
+export type { Calendar2kViewProps, DateValueType };

package/src/Calendar2kView.web.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import { Calendar2kViewProps } from './Calendar2k.types';
+
+export default function Calendar2kView(_props: Calendar2kViewProps) {
+  return (
+    <div
+      style={{
+        backgroundColor: '#aabbcc',
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <span>Calendar2k - native view</span>
+    </div>
+  );
+}

package/src/components/ArrowButton.tsx

@@ -0,0 +1,40 @@
+import { PropsWithChildren } from "react";
+import { Image } from "react-native";
+import { KTouchableOpacity } from "../ui";
+
+type Props = {
+  onPress: () => void;
+  color?: string;
+  direction?: "right" | "left";
+} & PropsWithChildren;
+export default function ArrowButton({
+  onPress,
+  children,
+  color,
+  direction = "right",
+}: Props) {
+  const source = () => {
+    switch (direction) {
+      case "right":
+        return require("../assets/images/chevron-right.png");
+      case "left":
+        return require("../assets/images/chevron-left.png");
+    }
+  };
+
+  return (
+    <KTouchableOpacity
+      backgroundColor={color}
+      width={35}
+      height={35}
+      alignItems="center"
+      justifyContent="center"
+      nativeProps={{ onPress }}
+    >
+      <Image
+        source={source()}
+        style={{ width: 12, height: 12, tintColor: "white" }}
+      />
+    </KTouchableOpacity>
+  );
+}

package/src/components/Backdrop.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from "react";
+import { Animated } from "react-native";
+import { KTouchableOpacity } from "../ui";
+
+type Props = {
+  onPress: () => void;
+};
+export default function Backdrop({ onPress }: Props) {
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 800,
+      delay: 100,
+      useNativeDriver: true,
+    }).start();
+  }, []);
+
+  return (
+    <Animated.View
+      style={{
+        opacity: fadeAnim,
+        flex: 1,
+        backgroundColor: "#0003",
+      }}
+    >
+      <KTouchableOpacity flex={1} nativeProps={{ onPress }} />
+    </Animated.View>
+  );
+}

package/src/components/DayLabel.tsx

@@ -0,0 +1,20 @@
+import React, { PropsWithChildren } from "react";
+import { KText, KView } from "../ui";
+
+type Props = {
+  color?: string;
+} & PropsWithChildren;
+export default function DayLabel({ children, color }: Props) {
+  return (
+    <KView padding={4}>
+      <KText
+        textAlign="center"
+        fontWeight="bold"
+        textTransform="uppercase"
+        color={color}
+      >
+        {children}
+      </KText>
+    </KView>
+  );
+}

package/src/components/Icon.tsx

@@ -0,0 +1,24 @@
+import { Image } from "react-native";
+
+type Props = {
+  color?: string;
+  mode?: "date" | "time" | "datetime";
+};
+export default function Icon({ color, mode }: Props) {
+  const source = () => {
+    switch (mode) {
+      case "time":
+        return require("../assets/images/clock.png");
+
+      default:
+        return require("../assets/images/calendar.png");
+    }
+  };
+
+  return (
+    <Image
+      source={source()}
+      style={{ width: 25, height: 25, tintColor: "#A1A1A1" }}
+    />
+  );
+}

package/src/components/SwipeIcon.tsx

@@ -0,0 +1,13 @@
+import { Image } from "react-native";
+
+type Props = {
+  color?: string;
+};
+export default function SwipeIcon({ color }: Props) {
+  return (
+    <Image
+      source={require("../assets/images/swipe.png")}
+      style={{ width: 30, height: 30, tintColor: color }}
+    />
+  );
+}