onesine · onesine · Aug 16, 2024
diff --git a/pages/index.js b/pages/index.js
@@ -11,19 +11,18 @@ 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");
     const [disabled, setDisabled] = useState(false);
     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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,17 +45,13 @@ const Calendar: React.FC<Props> = props => {
 
     // Contexts
     const {
-        hour,
-        minute,
-        periodDay,
         period,
         changePeriod,
         changeDayHover,
         showFooter,
         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
@@ -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,20 +293,13 @@ const Datepicker = (props: DatepickerType) => {
         };
     }, [
         asSingle,
-        asTimePicker,
         safePrimaryColor,
         configs,
         hideDatepicker,
         period,
         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>