From 0d78a2c1e12bae8ee4f3fdd3c45230e489954200 Mon Sep 17 00:00:00 2001 From: Julio Lima Date: Fri, 9 Feb 2024 11:49:19 -0500 Subject: [PATCH 01/10] Missing save the date time in returned value. --- pages/index.js | 24 +++++++++-- src/components/Calendar/index.tsx | 18 ++++---- src/components/Datepicker.tsx | 31 +++++++++++++- src/components/Input.tsx | 8 +++- src/components/Time.tsx | 71 +++++++++++++++++++++++++++++++ src/contexts/DatepickerContext.ts | 10 +++++ src/helpers/index.ts | 25 +++++++++++ src/types/index.ts | 1 + 8 files changed, 174 insertions(+), 14 deletions(-) create mode 100644 src/components/Time.tsx diff --git a/pages/index.js b/pages/index.js index 5ce6034e..1a9b3e71 100644 --- a/pages/index.js +++ b/pages/index.js @@ -11,10 +11,11 @@ export default function Playground() { endDate: null }); const [primaryColor, setPrimaryColor] = useState("blue"); - const [useRange, setUseRange] = useState(true); - const [showFooter, setShowFooter] = useState(false); + const [useRange, setUseRange] = useState(false); + const [showFooter, setShowFooter] = useState(true); const [showShortcuts, setShowShortcuts] = useState(false); - const [asSingle, setAsSingle] = useState(false); + const [asTimePicker, setAsTimePicker] = useState(true); + const [asSingle, setAsSingle] = useState(true); const [placeholder, setPlaceholder] = useState(""); const [separator, setSeparator] = useState("~"); const [i18n, setI18n] = useState("en"); @@ -22,7 +23,7 @@ export default function Playground() { const [inputClassName, setInputClassName] = useState(""); const [containerClassName, setContainerClassName] = useState(""); const [toggleClassName, setToggleClassName] = useState(""); - const [displayFormat, setDisplayFormat] = useState("YYYY-MM-DD"); + const [displayFormat, setDisplayFormat] = useState("DD/MM/YYYY hh:mm A"); const [readOnly, setReadOnly] = useState(false); const [minDate, setMinDate] = useState(""); const [maxDate, setMaxDate] = useState(""); @@ -92,6 +93,7 @@ export default function Playground() { } }} asSingle={asSingle} + asTimePicker={asTimePicker} placeholder={placeholder} separator={separator} startFrom={ @@ -187,6 +189,20 @@ export default function Playground() { +
+
+ setAsTimePicker(e.target.checked)} + /> + +
+
= ({ changeDatepickerValue, hideDatepicker, asSingle, + asTimePicker, i18n, startWeekOn, input @@ -129,7 +130,7 @@ const Calendar: React.FC = ({ }, ipt ); - hideDatepicker(); + if (!asTimePicker) hideDatepicker(); } if (period.start && period.end) { @@ -185,16 +186,17 @@ const Calendar: React.FC = ({ } }, [ - asSingle, - changeDatepickerValue, - changeDayHover, - changePeriod, date, - hideDatepicker, - period.end, period.start, + period.end, showFooter, - input + input, + changeDatepickerValue, + asTimePicker, + hideDatepicker, + changeDayHover, + changePeriod, + asSingle ] ); diff --git a/src/components/Datepicker.tsx b/src/components/Datepicker.tsx index 54e90b78..65d30211 100644 --- a/src/components/Datepicker.tsx +++ b/src/components/Datepicker.tsx @@ -5,6 +5,7 @@ import Calendar from "../components/Calendar"; import Footer from "../components/Footer"; import Input from "../components/Input"; import Shortcuts from "../components/Shortcuts"; +import Time from "../components/Time"; import { COLORS, DATE_FORMAT, DEFAULT_COLOR, LANGUAGE } from "../constants"; import DatepickerContext from "../contexts/DatepickerContext"; import { formatDate, nextMonth, previousMonth } from "../helpers"; @@ -22,6 +23,7 @@ const Datepicker: React.FC = ({ showShortcuts = false, configs = undefined, asSingle = false, + asTimePicker = false, placeholder = null, separator = "~", startFrom = null, @@ -61,6 +63,10 @@ const Datepicker: React.FC = ({ const [inputText, setInputText] = useState(""); const [inputRef, setInputRef] = useState(React.createRef()); + const [hour, setHour] = useState("1"); + const [minute, setMinute] = useState("00"); + const [periodDay, setPeriodDay] = useState<"AM" | "PM">("PM"); + // Custom Hooks use useOnClickOutside(containerRef, () => { const container = containerRef.current; @@ -93,6 +99,21 @@ const Datepicker: React.FC = ({ } }, []); + /* Start Time */ + const changeHour = useCallback((hour: string) => { + setHour(hour); + }, []); + + const changeMinute = useCallback((minute: string) => { + setMinute(minute); + }, []); + + const changePeriodDay = useCallback((periodDay: "AM" | "PM") => { + setPeriodDay(periodDay); + }, []); + + /* End Time */ + /* Start First */ const firstGotoDate = useCallback( (date: dayjs.Dayjs) => { @@ -247,6 +268,7 @@ const Datepicker: React.FC = ({ const contextValues = useMemo(() => { return { asSingle, + asTimePicker, primaryColor: safePrimaryColor, configs, calendarContainer: calendarContainerRef, @@ -260,6 +282,9 @@ const Datepicker: React.FC = ({ changeInputText: (newText: string) => setInputText(newText), updateFirstDate: (newDate: dayjs.Dayjs) => firstGotoDate(newDate), changeDatepickerValue: onChange, + changeHour, + changeMinute, + changePeriodDay, showFooter, placeholder, separator, @@ -286,6 +311,7 @@ const Datepicker: React.FC = ({ }; }, [ asSingle, + asTimePicker, safePrimaryColor, configs, hideDatepicker, @@ -293,6 +319,9 @@ const Datepicker: React.FC = ({ dayHover, inputText, onChange, + changeHour, + changeMinute, + changePeriodDay, showFooter, placeholder, separator, @@ -376,7 +405,7 @@ const Datepicker: React.FC = ({ )}
- + {asSingle && asTimePicker &&