From 936f6579ff5d611a46b6649fcffe8d6bdbdf16f9 Mon Sep 17 00:00:00 2001
From: Lewhe Onesine <55294457+onesine@users.noreply.github.com>
Date: Fri, 16 Aug 2024 12:58:09 +0100
Subject: [PATCH] Revert "Feature Time Picker"

---
 pages/index.js                     |  24 +----
 src/components/Calendar/Days.tsx   |   4 +-
 src/components/Calendar/Months.tsx |   2 +-
 src/components/Calendar/Week.tsx   |   6 +-
 src/components/Calendar/Years.tsx  |   5 +-
 src/components/Calendar/index.tsx  |  40 +++-----
 src/components/Datepicker.tsx      |  59 +++---------
 src/components/Footer.tsx          |  25 +----
 src/components/Input.tsx           |  35 ++-----
 src/components/Shortcuts.tsx       |   2 +-
 src/components/Time.tsx            | 144 -----------------------------
 src/components/utils.tsx           |   4 +-
 src/constants/index.ts             |   2 -
 src/contexts/DatepickerContext.ts  |  25 +----
 src/helpers/index.ts               |  29 +-----
 src/types/index.ts                 |   3 -
 16 files changed, 63 insertions(+), 346 deletions(-)
 delete mode 100644 src/components/Time.tsx

diff --git a/pages/index.js b/pages/index.js
index 8064ac49..61ddfafc 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -11,11 +11,10 @@ export default function Playground() {
         endDate: null
     });
     const [primaryColor, setPrimaryColor] = useState("blue");
-    const [useRange, setUseRange] = useState(false);
-    const [showFooter, setShowFooter] = useState(true);
+    const [useRange, setUseRange] = useState(true);
+    const [showFooter, setShowFooter] = useState(false);
     const [showShortcuts, setShowShortcuts] = useState(false);
-    const [asTimePicker, setAsTimePicker] = useState(true);
-    const [asSingle, setAsSingle] = useState(true);
+    const [asSingle, setAsSingle] = useState(false);
     const [placeholder, setPlaceholder] = useState("");
     const [separator, setSeparator] = useState("~");
     const [i18n, setI18n] = useState("en");
@@ -23,7 +22,7 @@ export default function Playground() {
     const [inputClassName, setInputClassName] = useState("");
     const [containerClassName, setContainerClassName] = useState("");
     const [toggleClassName, setToggleClassName] = useState("");
-    const [displayFormat, setDisplayFormat] = useState("DD/MM/YYYY hh:mm A");
+    const [displayFormat, setDisplayFormat] = useState("YYYY-MM-DD");
     const [readOnly, setReadOnly] = useState(false);
     const [minDate, setMinDate] = useState("");
     const [maxDate, setMaxDate] = useState("");
@@ -94,7 +93,6 @@ export default function Playground() {
                         }
                     }}
                     asSingle={asSingle}
-                    asTimePicker={asTimePicker}
                     placeholder={placeholder}
                     separator={separator}
                     startFrom={
@@ -191,20 +189,6 @@ export default function Playground() {
                             </label>
                         </div>
                     </div>
-                    <div className="mb-2 w-1/2 sm:w-full">
-                        <div className="inline-flex items-center">
-                            <input
-                                type="checkbox"
-                                className="mr-2 rounded"
-                                id="asTimePicker"
-                                checked={asTimePicker}
-                                onChange={e => setAsTimePicker(e.target.checked)}
-                            />
-                            <label className="block" htmlFor="showFooter">
-                                As Time Picker
-                            </label>
-                        </div>
-                    </div>
                     <div className="mb-2 w-1/2 sm:w-full">
                         <div className="inline-flex items-center">
                             <input
diff --git a/src/components/Calendar/Days.tsx b/src/components/Calendar/Days.tsx
index ae31e854..90c5f94c 100644
--- a/src/components/Calendar/Days.tsx
+++ b/src/components/Calendar/Days.tsx
@@ -4,7 +4,7 @@ import React, { useCallback, useContext } from "react";
 
 import { BG_COLOR, TEXT_COLOR } from "../../constants";
 import DatepickerContext from "../../contexts/DatepickerContext";
-import { classNames as cn, formatDate, nextMonth, previousMonth } from "../../helpers";
+import { formatDate, nextMonth, previousMonth, classNames as cn } from "../../helpers";
 import { Period } from "../../types";
 
 dayjs.extend(isBetween);
@@ -342,7 +342,7 @@ const Days: React.FC<Props> = props => {
     );
 
     return (
-        <div className="my-1 grid grid-cols-7 gap-y-0.5">
+        <div className="grid grid-cols-7 gap-y-0.5 my-1">
             {calendarData.days.previous.map((item, index) => (
                 <button
                     type="button"
diff --git a/src/components/Calendar/Months.tsx b/src/components/Calendar/Months.tsx
index 6cd82d1d..ebd1ce94 100644
--- a/src/components/Calendar/Months.tsx
+++ b/src/components/Calendar/Months.tsx
@@ -15,7 +15,7 @@ const Months: React.FC<Props> = ({ currentMonth, clickMonth }) => {
     const { i18n } = useContext(DatepickerContext);
     loadLanguageModule(i18n);
     return (
-        <div className="mt-2 grid w-full grid-cols-2 gap-2">
+        <div className="w-full grid grid-cols-2 gap-2 mt-2">
             {MONTHS.map(item => (
                 <RoundedButton
                     key={item}
diff --git a/src/components/Calendar/Week.tsx b/src/components/Calendar/Week.tsx
index eadd7796..45e957c2 100644
--- a/src/components/Calendar/Week.tsx
+++ b/src/components/Calendar/Week.tsx
@@ -33,12 +33,12 @@ const Week: React.FC = () => {
     }, [startWeekOn]);
 
     return (
-        <div className="grid grid-cols-7 border-b border-gray-300 py-2 dark:border-gray-700">
+        <div className="grid grid-cols-7 border-b border-gray-300 dark:border-gray-700 py-2">
             {DAYS.map(item => (
-                <div key={item} className="text-center tracking-wide text-gray-500">
+                <div key={item} className="tracking-wide text-gray-500 text-center">
                     {ucFirst(
                         shortString(
-                            dayjs(`2022-11-${6 + (item + startDateModifier)}` as any)
+                            dayjs(`2022-11-${6 + (item + startDateModifier)}`)
                                 .locale(i18n)
                                 .format("ddd")
                         )
diff --git a/src/components/Calendar/Years.tsx b/src/components/Calendar/Years.tsx
index d1edf0ed..0bbef7b5 100644
--- a/src/components/Calendar/Years.tsx
+++ b/src/components/Calendar/Years.tsx
@@ -1,9 +1,10 @@
 import React, { useContext } from "react";
 
-import DatepickerContext from "../../contexts/DatepickerContext";
 import { generateArrayNumber } from "../../helpers";
 import { RoundedButton } from "../utils";
 
+import DatepickerContext from "contexts/DatepickerContext";
+
 interface Props {
     year: number;
     currentYear: number;
@@ -35,7 +36,7 @@ const Years: React.FC<Props> = ({ year, currentYear, minYear, maxYear, clickYear
     }
 
     return (
-        <div className="mt-2 grid w-full grid-cols-2 gap-2">
+        <div className="w-full grid grid-cols-2 gap-2 mt-2">
             {generateArrayNumber(startDate, endDate).map((item, index) => (
                 <RoundedButton
                     key={index}
diff --git a/src/components/Calendar/index.tsx b/src/components/Calendar/index.tsx
index a3476249..1487e1ae 100644
--- a/src/components/Calendar/index.tsx
+++ b/src/components/Calendar/index.tsx
@@ -5,7 +5,6 @@ import { CALENDAR_SIZE, DATE_FORMAT } from "../../constants";
 import DatepickerContext from "../../contexts/DatepickerContext";
 import {
     formatDate,
-    formatDateTimeToISO,
     getDaysInMonth,
     getFirstDayInMonth,
     getFirstDaysInMonth,
@@ -15,7 +14,6 @@ import {
     nextMonth,
     previousMonth
 } from "../../helpers";
-import { DateType } from "../../types";
 import {
     ChevronLeftIcon,
     ChevronRightIcon,
@@ -29,6 +27,8 @@ import Months from "./Months";
 import Week from "./Week";
 import Years from "./Years";
 
+import { DateType } from "types";
+
 interface Props {
     date: dayjs.Dayjs;
     minDate?: DateType | null;
@@ -45,9 +45,6 @@ const Calendar: React.FC<Props> = props => {
 
     // Contexts
     const {
-        hour,
-        minute,
-        periodDay,
         period,
         changePeriod,
         changeDayHover,
@@ -55,7 +52,6 @@ const Calendar: React.FC<Props> = props => {
         changeDatepickerValue,
         hideDatepicker,
         asSingle,
-        asTimePicker,
         i18n,
         startWeekOn,
         input
@@ -124,16 +120,12 @@ const Calendar: React.FC<Props> = props => {
                 const ipt = input?.current;
                 changeDatepickerValue(
                     {
-                        startDate: asTimePicker
-                            ? formatDateTimeToISO(start, hour, minute, periodDay)
-                            : dayjs(start).format(DATE_FORMAT),
-                        endDate: asTimePicker
-                            ? formatDateTimeToISO(end, hour, minute, periodDay)
-                            : dayjs(end).format(DATE_FORMAT)
+                        startDate: dayjs(start).format(DATE_FORMAT),
+                        endDate: dayjs(end).format(DATE_FORMAT)
                     },
                     ipt
                 );
-                if (!asTimePicker) hideDatepicker();
+                hideDatepicker();
             }
 
             if (period.start && period.end) {
@@ -191,20 +183,16 @@ const Calendar: React.FC<Props> = props => {
             }
         },
         [
-            date,
-            period.start,
-            period.end,
-            showFooter,
-            input,
+            asSingle,
             changeDatepickerValue,
-            asTimePicker,
-            hour,
-            minute,
-            periodDay,
-            hideDatepicker,
             changeDayHover,
             changePeriod,
-            asSingle
+            date,
+            hideDatepicker,
+            period.end,
+            period.start,
+            showFooter,
+            input
         ]
     );
 
@@ -253,7 +241,7 @@ const Calendar: React.FC<Props> = props => {
 
     return (
         <div className="w-full md:w-[296px] md:min-w-[296px]">
-            <div className="flex items-center space-x-1.5 rounded-md border border-gray-300 px-2 py-1.5 dark:border-gray-700">
+            <div className="flex items-center space-x-1.5 border border-gray-300 dark:border-gray-700 rounded-md px-2 py-1.5">
                 {!showMonths && !showYears && (
                     <div className="flex-none">
                         <RoundedButton roundedFull={true} onClick={onClickPrevious}>
@@ -321,7 +309,7 @@ const Calendar: React.FC<Props> = props => {
                 )}
             </div>
 
-            <div className="mt-0.5 min-h-[285px] px-0.5 sm:px-2">
+            <div className="px-0.5 sm:px-2 mt-0.5 min-h-[285px]">
                 {showMonths && (
                     <Months currentMonth={calendarData.date.month() + 1} clickMonth={clickMonth} />
                 )}
diff --git a/src/components/Datepicker.tsx b/src/components/Datepicker.tsx
index 78e10e84..593f783a 100644
--- a/src/components/Datepicker.tsx
+++ b/src/components/Datepicker.tsx
@@ -9,9 +9,8 @@ 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 { ColorKeys, DatepickerType, Period, PeriodDay } from "../types";
+import { Period, DatepickerType, ColorKeys } from "../types";
 
-import Time from "./Time";
 import { Arrow, VerticalDash } from "./utils";
 
 const Datepicker = (props: DatepickerType) => {
@@ -28,7 +27,6 @@ const Datepicker = (props: DatepickerType) => {
         placeholder = null,
         separator = "~",
         startFrom = null,
-        asTimePicker = false,
         i18n = LANGUAGE,
         disabled = false,
         inputClassName = null,
@@ -68,10 +66,6 @@ const Datepicker = (props: DatepickerType) => {
     const [inputText, setInputText] = useState<string>("");
     const [inputRef, setInputRef] = useState(React.createRef<HTMLInputElement>());
 
-    const [hour, setHour] = useState<string>("8");
-    const [minute, setMinute] = useState<string>("00");
-    const [periodDay, setPeriodDay] = useState<PeriodDay>("AM");
-
     // Custom Hooks use
     useOnClickOutside(containerRef, () => {
         const container = containerRef.current;
@@ -104,14 +98,6 @@ const Datepicker = (props: DatepickerType) => {
         }
     }, []);
 
-    /* Start Time */
-    const changeHour = useCallback((hour: string) => setHour(hour), []);
-
-    const changeMinute = useCallback((minute: string) => setMinute(minute), []);
-
-    const changePeriodDay = useCallback((periodDay: PeriodDay) => setPeriodDay(periodDay), []);
-    /* End Time */
-
     /* Start First */
     const firstGotoDate = useCallback(
         (date: dayjs.Dayjs) => {
@@ -267,7 +253,6 @@ const Datepicker = (props: DatepickerType) => {
     const contextValues = useMemo(() => {
         return {
             asSingle,
-            asTimePicker,
             primaryColor: safePrimaryColor,
             configs,
             calendarContainer: calendarContainerRef,
@@ -281,12 +266,6 @@ const Datepicker = (props: DatepickerType) => {
             changeInputText: (newText: string) => setInputText(newText),
             updateFirstDate: (newDate: dayjs.Dayjs) => firstGotoDate(newDate),
             changeDatepickerValue: onChange,
-            hour,
-            minute,
-            periodDay,
-            changeHour,
-            changeMinute,
-            changePeriodDay,
             showFooter,
             placeholder,
             separator,
@@ -314,7 +293,6 @@ const Datepicker = (props: DatepickerType) => {
         };
     }, [
         asSingle,
-        asTimePicker,
         safePrimaryColor,
         configs,
         hideDatepicker,
@@ -322,12 +300,6 @@ const Datepicker = (props: DatepickerType) => {
         dayHover,
         inputText,
         onChange,
-        hour,
-        minute,
-        periodDay,
-        changeHour,
-        changeMinute,
-        changePeriodDay,
         showFooter,
         placeholder,
         separator,
@@ -381,33 +353,31 @@ const Datepicker = (props: DatepickerType) => {
                 <div className={popupClassNameOverload} ref={calendarContainerRef}>
                     <Arrow ref={arrowRef} />
 
-                    <div className="mt-2.5 rounded-lg border border-gray-300 bg-white px-1 py-0.5 shadow-sm dark:border-slate-600 dark:bg-slate-800 dark:text-white">
-                        <div className="flex flex-col py-2 lg:flex-row">
+                    <div className="mt-2.5 shadow-sm border border-gray-300 px-1 py-0.5 bg-white dark:bg-slate-800 dark:text-white dark:border-slate-600 rounded-lg">
+                        <div className="flex flex-col lg:flex-row py-2">
                             {showShortcuts && <Shortcuts />}
 
                             <div
-                                className={`flex flex-col items-stretch space-y-4 md:flex-row md:space-x-1.5 md:space-y-0 ${
+                                className={`flex items-stretch flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-1.5 ${
                                     showShortcuts ? "md:pl-2" : "md:pl-1"
                                 } pr-2 lg:pr-1`}
                             >
-                                <div>
-                                    <Calendar
-                                        date={firstDate}
-                                        onClickPrevious={previousMonthFirst}
-                                        onClickNext={nextMonthFirst}
-                                        changeMonth={changeFirstMonth}
-                                        changeYear={changeFirstYear}
-                                        minDate={minDate}
-                                        maxDate={maxDate}
-                                    />
-                                    {asSingle && asTimePicker && <Time />}
-                                </div>
+                                <Calendar
+                                    date={firstDate}
+                                    onClickPrevious={previousMonthFirst}
+                                    onClickNext={nextMonthFirst}
+                                    changeMonth={changeFirstMonth}
+                                    changeYear={changeFirstYear}
+                                    minDate={minDate}
+                                    maxDate={maxDate}
+                                />
 
                                 {useRange && (
                                     <>
                                         <div className="flex items-center">
                                             <VerticalDash />
                                         </div>
+
                                         <Calendar
                                             date={secondDate}
                                             onClickPrevious={previousMonthSecond}
@@ -421,6 +391,7 @@ const Datepicker = (props: DatepickerType) => {
                                 )}
                             </div>
                         </div>
+
                         {showFooter && <Footer />}
                     </div>
                 </div>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index e86f7374..40f8fd2b 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -3,23 +3,13 @@ import React, { useCallback, useContext } from "react";
 
 import { DATE_FORMAT } from "../constants";
 import DatepickerContext from "../contexts/DatepickerContext";
-import { formatDateTimeToISO } from "../helpers";
 
 import { PrimaryButton, SecondaryButton } from "./utils";
 
 const Footer: React.FC = () => {
     // Contexts
-    const {
-        asTimePicker,
-        period,
-        hour,
-        minute,
-        periodDay,
-        configs,
-        classNames,
-        changeDatepickerValue,
-        hideDatepicker
-    } = useContext(DatepickerContext);
+    const { hideDatepicker, period, changeDatepickerValue, configs, classNames } =
+        useContext(DatepickerContext);
 
     // Functions
     const getClassName = useCallback(() => {
@@ -32,7 +22,7 @@ const Footer: React.FC = () => {
 
     return (
         <div className={getClassName()}>
-            <div className="flex w-full items-center justify-center space-x-3 md:w-auto">
+            <div className="w-full md:w-auto flex items-center justify-center space-x-3">
                 <SecondaryButton
                     onClick={() => {
                         hideDatepicker();
@@ -44,14 +34,9 @@ const Footer: React.FC = () => {
                     onClick={() => {
                         if (period.start && period.end) {
                             changeDatepickerValue({
-                                startDate: asTimePicker
-                                    ? formatDateTimeToISO(period.start, hour, minute, periodDay)
-                                    : dayjs(period.start).format(DATE_FORMAT),
-                                endDate: asTimePicker
-                                    ? formatDateTimeToISO(period.end, hour, minute, periodDay)
-                                    : dayjs(period.end).format(DATE_FORMAT)
+                                startDate: dayjs(period.start).format(DATE_FORMAT),
+                                endDate: dayjs(period.end).format(DATE_FORMAT)
                             });
-
                             hideDatepicker();
                         }
                     }}
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 9f89cea6..80804b54 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -1,28 +1,17 @@
 import dayjs from "dayjs";
-import React from "react";
-import {
-    ChangeEvent,
-    FC,
-    KeyboardEvent,
-    RefObject,
-    useCallback,
-    useContext,
-    useEffect,
-    useRef
-} from "react";
+import React, { ChangeEvent, useCallback, useContext, useEffect, useRef } from "react";
 
 import { BORDER_COLOR, DATE_FORMAT, RING_COLOR } from "../constants";
 import DatepickerContext from "../contexts/DatepickerContext";
 import { dateIsValid, parseFormattedDate } from "../helpers";
 
 import ToggleButton from "./ToggleButton";
-const ENTER = "Enter";
 
 type Props = {
-    setContextRef?: (ref: RefObject<HTMLInputElement>) => void;
+    setContextRef?: (ref: React.RefObject<HTMLInputElement>) => void;
 };
 
-const Input: FC<Props> = (e: Props) => {
+const Input: React.FC<Props> = (e: Props) => {
     // Context
     const {
         primaryColor,
@@ -36,7 +25,6 @@ const Input: FC<Props> = (e: Props) => {
         hideDatepicker,
         changeDatepickerValue,
         asSingle,
-        asTimePicker,
         placeholder,
         separator,
         disabled,
@@ -83,7 +71,7 @@ const Input: FC<Props> = (e: Props) => {
 
             const dates = [];
 
-            if (asSingle || asTimePicker) {
+            if (asSingle) {
                 const date = parseFormattedDate(inputValue, displayFormat);
                 if (dateIsValid(date.toDate())) {
                     dates.push(date.format(DATE_FORMAT));
@@ -127,20 +115,12 @@ const Input: FC<Props> = (e: Props) => {
 
             changeInputText(e.target.value);
         },
-        [
-            asSingle,
-            asTimePicker,
-            changeInputText,
-            displayFormat,
-            separator,
-            changeDatepickerValue,
-            changeDayHover
-        ]
+        [asSingle, displayFormat, separator, changeDatepickerValue, changeDayHover, changeInputText]
     );
 
     const handleInputKeyDown = useCallback(
-        (e: KeyboardEvent<HTMLInputElement>) => {
-            if (e.key === ENTER) {
+        (e: React.KeyboardEvent<HTMLInputElement>) => {
+            if (e.key === "Enter") {
                 const input = inputRef.current;
                 if (input) {
                     input.blur();
@@ -308,6 +288,7 @@ const Input: FC<Props> = (e: Props) => {
                 onChange={handleInputChange}
                 onKeyDown={handleInputKeyDown}
             />
+
             <button
                 type="button"
                 ref={buttonRef}
diff --git a/src/components/Shortcuts.tsx b/src/components/Shortcuts.tsx
index cb2e59db..ef9c5b55 100644
--- a/src/components/Shortcuts.tsx
+++ b/src/components/Shortcuts.tsx
@@ -93,7 +93,7 @@ const Shortcuts: React.FC = () => {
         }
 
         return Object.entries(configs.shortcuts).flatMap(([key, customConfig]) => {
-            if (Object.prototype.hasOwnProperty?.call(DEFAULT_SHORTCUTS, key)) {
+            if (Object.prototype.hasOwnProperty.call(DEFAULT_SHORTCUTS, key)) {
                 return [[key, DEFAULT_SHORTCUTS[key]]];
             }
 
diff --git a/src/components/Time.tsx b/src/components/Time.tsx
deleted file mode 100644
index c410f5e4..00000000
--- a/src/components/Time.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import React, { ChangeEvent, useContext } from "react";
-
-import DatepickerContext from "../contexts/DatepickerContext";
-import { classNames as cn, formatDateTimeToISO } from "../helpers";
-import { PeriodDay } from "../types";
-
-const Time: React.FC = () => {
-    // Contexts
-    const {
-        hour,
-        minute,
-        periodDay,
-        period,
-        changeDatepickerValue,
-        changeHour,
-        changeMinute,
-        changePeriodDay
-    } = useContext(DatepickerContext);
-
-    const svgString = `
-        <svg 
-            class="flex-shrink-0 w-3 h-3" 
-            xmlns="http://www.w3.org/2000/svg" 
-            width="24" 
-            height="24" 
-            viewBox="0 0 24 24" 
-            fill="none" 
-            stroke="#6b7280" 
-            stroke-width="2.5" 
-            stroke-linecap="round" 
-            stroke-linejoin="round"
-        >
-            <path d="m7 15 5 5 5-5"></path>
-            <path d="m7 9 5-5 5 5"></path>
-        </svg>
-      `;
-    const dataUri = `data:image/svg+xml;base64,${Buffer.from(svgString).toString("base64")}`;
-
-    const selectClassname = cn(
-        "!bg-[length:0.75rem_0.75rem]",
-        "bg-[right_0.5rem_center]",
-        "!bg-no-repeat !appearance-none !bg-transparent !text-sm !text-center !outline-none !focus:outline-none",
-        "!pl-2 !pr-6 !py-1 rounded-[8px] !w-fit",
-        "!border border-gray-300 focus:border-primary-blue-100"
-    );
-
-    const HOURS = Array.from({ length: 12 });
-    const MINUTES = Array.from({ length: 12 });
-
-    const handleChangeHour = (e: ChangeEvent<HTMLSelectElement>) => {
-        changeHour(e.target.value);
-
-        if (period.start && period.end)
-            changeDatepickerValue({
-                startDate: formatDateTimeToISO(period.start, e.target.value, minute, periodDay),
-                endDate: formatDateTimeToISO(period.end, e.target.value, minute, periodDay)
-            });
-    };
-
-    const handleChangeMinute = (e: ChangeEvent<HTMLSelectElement>) => {
-        changeMinute(e.target.value);
-
-        if (period.start && period.end)
-            changeDatepickerValue({
-                startDate: formatDateTimeToISO(period.start, hour, e.target.value, periodDay),
-                endDate: formatDateTimeToISO(period.end, hour, e.target.value, periodDay)
-            });
-    };
-
-    const handleChangePeriodDay = (e: ChangeEvent<HTMLSelectElement>) => {
-        changePeriodDay(e.target.value as PeriodDay);
-
-        if (period.start && period.end)
-            changeDatepickerValue({
-                startDate: formatDateTimeToISO(
-                    period.start,
-                    hour,
-                    minute,
-                    e.target.value as PeriodDay
-                ),
-                endDate: formatDateTimeToISO(period.end, hour, minute, e.target.value as PeriodDay)
-            });
-    };
-
-    return (
-        <div className="flex w-full items-center justify-center space-x-3 focus:ring-primary-blue-100 md:w-auto">
-            <div className="pb-2">
-                <select
-                    name="hour"
-                    className={selectClassname}
-                    onChange={handleChangeHour}
-                    value={hour}
-                    style={{
-                        backgroundImage: "url(" + dataUri + ")"
-                    }}
-                >
-                    {HOURS.map((_, index) => {
-                        const hr = index + 1;
-                        return (
-                            <option key={hr} value={hr}>
-                                {hr}
-                            </option>
-                        );
-                    })}
-                </select>
-                <span className="mx-3 text-xl">:</span>
-                <select
-                    name="minute"
-                    className={cn(selectClassname, "mr-4")}
-                    onChange={handleChangeMinute}
-                    value={minute}
-                    style={{
-                        backgroundImage: "url(" + dataUri + ")"
-                    }}
-                >
-                    {MINUTES.map((_, index) => {
-                        const min = index * 5;
-                        return (
-                            <option key={min} value={min}>
-                                {new Intl.NumberFormat("en-US", {
-                                    minimumIntegerDigits: 2
-                                }).format(min)}
-                            </option>
-                        );
-                    })}
-                </select>
-                <select
-                    name="ampm"
-                    className={selectClassname}
-                    onChange={handleChangePeriodDay}
-                    value={periodDay}
-                    style={{
-                        backgroundImage: "url(" + dataUri + ")"
-                    }}
-                >
-                    <option value="AM">AM</option>
-                    <option value="PM">PM</option>
-                </select>
-            </div>
-        </div>
-    );
-};
-
-export default Time;
diff --git a/src/components/utils.tsx b/src/components/utils.tsx
index c1817182..c0dfcdf0 100644
--- a/src/components/utils.tsx
+++ b/src/components/utils.tsx
@@ -4,7 +4,7 @@ import { BG_COLOR, BORDER_COLOR, BUTTON_COLOR, RING_COLOR } from "../constants";
 import DatepickerContext from "../contexts/DatepickerContext";
 
 interface IconProps {
-    className?: string;
+    className: string;
 }
 
 interface Button {
@@ -123,7 +123,7 @@ export const Arrow = React.forwardRef<HTMLDivElement, {}>((props, ref) => {
     return (
         <div
             ref={ref}
-            className="absolute z-20 ml-[1.2rem] mt-0.5 h-4 w-4 rotate-45 border-l border-t border-gray-300 bg-white dark:border-slate-600 dark:bg-slate-800"
+            className="absolute z-20 h-4 w-4 rotate-45 mt-0.5 ml-[1.2rem] border-l border-t border-gray-300 bg-white dark:bg-slate-800 dark:border-slate-600"
         />
     );
 });
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 0d3e0ae3..190da869 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -27,8 +27,6 @@ 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"];
diff --git a/src/contexts/DatepickerContext.ts b/src/contexts/DatepickerContext.ts
index 58bae977..d23635ef 100644
--- a/src/contexts/DatepickerContext.ts
+++ b/src/contexts/DatepickerContext.ts
@@ -3,13 +3,12 @@ import React, { createContext } from "react";
 
 import { DATE_FORMAT, LANGUAGE, START_WEEK } from "../constants";
 import {
-    ClassNamesTypeProp,
     Configs,
-    DateRangeType,
-    DateType,
-    DateValueType,
     Period,
-    PeriodDay,
+    DateValueType,
+    DateType,
+    DateRangeType,
+    ClassNamesTypeProp,
     PopoverDirectionType,
     ColorKeys,
     WeekStringType
@@ -18,19 +17,12 @@ import {
 interface DatepickerStore {
     input?: React.RefObject<HTMLInputElement>;
     asSingle?: boolean;
-    asTimePicker?: boolean;
     primaryColor: ColorKeys;
     configs?: Configs;
     calendarContainer: React.RefObject<HTMLDivElement> | null;
     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: PeriodDay) => void;
     changePeriod: (period: Period) => void;
     dayHover: string | null;
     changeDayHover: (day: string | null) => void;
@@ -79,15 +71,6 @@ 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
-    changeMinute: text => {},
-    // eslint-disable-next-line @typescript-eslint/no-empty-function,@typescript-eslint/no-unused-vars
-    changePeriodDay: text => {},
     // eslint-disable-next-line @typescript-eslint/no-empty-function,@typescript-eslint/no-unused-vars
     updateFirstDate: date => {},
     // eslint-disable-next-line @typescript-eslint/no-empty-function,@typescript-eslint/no-unused-vars
diff --git a/src/helpers/index.ts b/src/helpers/index.ts
index 1d790037..70f773e1 100644
--- a/src/helpers/index.ts
+++ b/src/helpers/index.ts
@@ -6,7 +6,7 @@ dayjs.extend(weekday);
 dayjs.extend(customParseFormat);
 
 import { DATE_FORMAT, LANGUAGE } from "../constants";
-import { PeriodDay, WeekStringType } from "../types";
+import { WeekStringType } from "../types";
 
 export function classNames(...classes: (false | null | undefined | string)[]) {
     return classes.filter(Boolean).join(" ");
@@ -597,30 +597,3 @@ export function loadLanguageModule(language = LANGUAGE) {
 export function dateIsValid(date: Date | number) {
     return date instanceof Date && !isNaN(date.getTime());
 }
-
-export function formatDateTimeToISO(
-    dateIncoming: Date | string,
-    hourIncoming: string,
-    minute: string,
-    periodDay: PeriodDay
-): string {
-    // Adjust hour based on period (AM/PM)
-    const calculateHour = (hourIncoming: string, periodDay: PeriodDay): string => {
-        if (periodDay === "PM" && hourIncoming !== String(12))
-            return String(Number(hourIncoming) + 12);
-
-        if (periodDay === "AM" && hourIncoming === String(12)) return "0";
-
-        return hourIncoming;
-    };
-
-    const hour = calculateHour(hourIncoming, periodDay);
-
-    // Create a new Date object and set the components
-    const date = dayjs(dateIncoming).add(Number(hour), "hours").add(Number(minute), "minutes");
-
-    // Format date to ISO 8601
-    const isoString = date.toISOString();
-
-    return isoString;
-}
diff --git a/src/types/index.ts b/src/types/index.ts
index 9ebafc70..8bef9080 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -2,8 +2,6 @@ import { ReactNode } from "react";
 
 import { COLORS } from "../constants";
 
-export type PeriodDay = "AM" | "PM";
-
 export interface Period {
     start: string | null;
     end: string | null;
@@ -66,7 +64,6 @@ export interface DatepickerType {
     showShortcuts?: boolean;
     configs?: Configs;
     asSingle?: boolean;
-    asTimePicker?: boolean;
     placeholder?: string;
     separator?: string;
     startFrom?: Date | null;