Missing understand the triggers to change the global value.

Author: julioflima

src/components/Calendar/index.tsx

@@ -50,6 +50,9 @@ const Calendar: React.FC<Props> = ({
 }) => {
     // Contexts
     const {
+        hour,
+        minute,
+        periodDay,
         period,
         changePeriod,
         changeDayHover,

src/components/Datepicker.tsx

@@ -10,7 +10,7 @@ import { COLORS, DATE_FORMAT, DEFAULT_COLOR, LANGUAGE } from "../constants";
 import DatepickerContext from "../contexts/DatepickerContext";
 import { formatDate, nextMonth, previousMonth } from "../helpers";
 import useOnClickOutside from "../hooks";
-import { Period, DatepickerType, ColorKeys } from "../types";
+import { Period, DatepickerType, ColorKeys, PeriodDay } from "../types";
 
 import { Arrow, VerticalDash } from "./utils";
 
@@ -65,7 +65,7 @@ const Datepicker: React.FC<DatepickerType> = ({
 
     const [hour, setHour] = useState<string>("1");
     const [minute, setMinute] = useState<string>("00");
-    const [periodDay, setPeriodDay] = useState<"AM" | "PM">("PM");
+    const [periodDay, setPeriodDay] = useState<PeriodDay>("PM");
 
     // Custom Hooks use
     useOnClickOutside(containerRef, () => {
@@ -108,7 +108,7 @@ const Datepicker: React.FC<DatepickerType> = ({
         setMinute(minute);
     }, []);
 
-    const changePeriodDay = useCallback((periodDay: "AM" | "PM") => {
+    const changePeriodDay = useCallback((periodDay: PeriodDay) => {
         setPeriodDay(periodDay);
     }, []);
 
@@ -282,6 +282,9 @@ const Datepicker: React.FC<DatepickerType> = ({
             changeInputText: (newText: string) => setInputText(newText),
             updateFirstDate: (newDate: dayjs.Dayjs) => firstGotoDate(newDate),
             changeDatepickerValue: onChange,
+            hour,
+            minute,
+            periodDay,
             changeHour,
             changeMinute,
             changePeriodDay,
@@ -319,6 +322,9 @@ const Datepicker: React.FC<DatepickerType> = ({
         dayHover,
         inputText,
         onChange,
+        hour,
+        minute,
+        periodDay,
         changeHour,
         changeMinute,
         changePeriodDay,

src/components/Input.tsx

@@ -120,7 +120,15 @@ const Input: React.FC<Props> = (e: Props) => {
 
             changeInputText(e.target.value);
         },
-        [asSingle, displayFormat, separator, changeDatepickerValue, changeDayHover, changeInputText]
+        [
+            asSingle,
+            asTimePicker,
+            changeInputText,
+            displayFormat,
+            separator,
+            changeDatepickerValue,
+            changeDayHover
+        ]
     );
 
     const handleInputKeyDown = useCallback(

src/components/Time.tsx

@@ -1,10 +1,11 @@
-import dayjs from "dayjs";
 import React, { ChangeEvent, useCallback, useContext } from "react";
 
-import { BG_COLOR, BORDER_COLOR, DATE_FORMAT, RING_COLOR } from "../constants";
+import { RING_COLOR } from "../constants";
 import DatepickerContext from "../contexts/DatepickerContext";
 import { classNames as cn } from "../helpers";
 
+import { PeriodDay } from "types";
+
 const Time: React.FC = () => {
     // Contexts
 
@@ -27,7 +28,7 @@ const Time: React.FC = () => {
     const handleChangeMinute = (e: ChangeEvent<HTMLSelectElement>) => changeMinute(e.target.value);
 
     const handleChangePeriodDay = (e: ChangeEvent<HTMLSelectElement>) =>
-        changePeriodDay(e.target.value as "AM" | "PM");
+        changePeriodDay(e.target.value as PeriodDay);
 
     return (
         <div className="w-full md:w-auto flex items-center justify-center space-x-3">

src/constants/index.ts

@@ -27,6 +27,8 @@ export const LANGUAGE = "en";
 
 export const DATE_FORMAT = "YYYY-MM-DD";
 
+export const DATE_TIME_FORMAT = "DD/MM/YYYY hh:mm A";
+
 export const START_WEEK = "sun";
 
 export const DATE_LOOKING_OPTIONS = ["forward", "backward", "middle"];

src/contexts/DatepickerContext.ts

@@ -10,7 +10,8 @@ import {
     DateRangeType,
     ClassNamesTypeProp,
     PopoverDirectionType,
-    ColorKeys
+    ColorKeys,
+    PeriodDay
 } from "../types";
 
 interface DatepickerStore {
@@ -23,9 +24,12 @@ interface DatepickerStore {
     arrowContainer: React.RefObject<HTMLDivElement> | null;
     hideDatepicker: () => void;
     period: Period;
+    hour: string;
+    minute: string;
+    periodDay: PeriodDay;
     changeHour: (hour: string) => void;
     changeMinute: (minute: string) => void;
-    changePeriodDay: (periodDay: "AM" | "PM") => void;
+    changePeriodDay: (periodDay: PeriodDay) => void;
     changePeriod: (period: Period) => void;
     dayHover: string | null;
     changeDayHover: (day: string | null) => void;
@@ -73,6 +77,9 @@ const DatepickerContext = createContext<DatepickerStore>({
     inputText: "",
     // eslint-disable-next-line @typescript-eslint/no-empty-function,@typescript-eslint/no-unused-vars
     changeInputText: text => {},
+    hour: "",
+    minute: "",
+    periodDay: "PM",
     // eslint-disable-next-line @typescript-eslint/no-empty-function,@typescript-eslint/no-unused-vars
     changeHour: text => {},
     // eslint-disable-next-line @typescript-eslint/no-empty-function,@typescript-eslint/no-unused-vars

src/helpers/index.ts

@@ -628,24 +628,24 @@ export function dateIsValid(date: Date | number) {
 }
 
 export function formatDateTimeToISO(
-    dateIncoming: Date,
-    hourIncoming: number,
-    minute: number,
+    dateIncoming: Date | string,
+    hourIncoming: string,
+    minute: string,
     period: string
 ): string {
     // Adjust hour based on period (AM/PM)
     const hour = (() => {
-        if (period === "PM" && hourIncoming !== 12) return hourIncoming + 12;
+        if (period === "PM" && hourIncoming !== String(12)) return hourIncoming + 12;
 
-        if (period === "AM" && hourIncoming === 12) return 0;
+        if (period === "AM" && hourIncoming === String(12)) return 0;
 
         return hourIncoming;
     })();
 
     // Create a new Date object and set the components
     const date = new Date(dateIncoming);
-    date.setHours(hour);
-    date.setMinutes(minute);
+    date.setHours(Number(hour));
+    date.setMinutes(Number(minute));
 
     // Format date to ISO 8601
     const isoString = date.toISOString();

src/types/index.ts

@@ -2,6 +2,8 @@ import React from "react";
 
 import { COLORS } from "../constants";
 
+export type PeriodDay = "AM" | "PM";
+
 export interface Period {
     start: string | null;
     end: string | null;

tsconfig.json

@@ -1,27 +1,35 @@
 {
-    "compilerOptions": {
-        "target": "esnext",
-        "lib": ["dom", "esnext"],
-        "module": "esnext",
-        "jsx": "preserve",
-        "moduleResolution": "node",
-        "forceConsistentCasingInFileNames": true,
-        "strict": true,
-        "noImplicitReturns": true,
-        "allowSyntheticDefaultImports": true,
-        "esModuleInterop": true,
-        "baseUrl": "src/",
-        "declaration": true,
-        "outDir": "./dist",
-        "inlineSources": true,
-        "sourceMap": true,
-        "rootDir": "src",
-        "allowJs": true,
-        "skipLibCheck": true,
-        "noEmit": true,
-        "resolveJsonModule": true,
-        "isolatedModules": true
-    },
-    "include": ["src/**/*"],
-    "exclude": ["node_modules"]
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": [
+      "dom",
+      "esnext"
+    ],
+    "module": "esnext",
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "baseUrl": "src/",
+    "declaration": true,
+    "outDir": "./dist",
+    "inlineSources": true,
+    "sourceMap": true,
+    "rootDir": "src",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "incremental": true
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }