Skip to content

Enhancing React Library Feature: Introducing Time Picker Capability #236

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 10 commits into from
Closed

Enhancing React Library Feature: Introducing Time Picker Capability #236

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0d78a2c
Missing save the date time in returned value.
julioflima Feb 9, 2024
448e290
Missing understand the triggers to change the global value.
julioflima Feb 10, 2024
b42d459
Finished styling.
julioflima Feb 10, 2024
946476f
Remove unused icon, and found that nothing is working...
julioflima Feb 10, 2024
caafbd3
Fix type...
julioflima Feb 10, 2024
4ce8bd4
Adjusted icon
julioflima Feb 10, 2024
7f44868
Finished
julioflima Feb 12, 2024
f25ad43
Add time picker.
julioflima Feb 12, 2024
f929039
remove unused.
julioflima Feb 12, 2024
da582c0
Add appearance none.
julioflima Feb 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 20 additions & 4 deletions pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,19 @@ 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");
const [disabled, setDisabled] = useState(false);
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("");
Expand Down Expand Up @@ -92,6 +93,7 @@ export default function Playground() {
}
}}
asSingle={asSingle}
asTimePicker={asTimePicker}
placeholder={placeholder}
separator={separator}
startFrom={
Expand Down Expand Up @@ -187,6 +189,20 @@ 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
Expand Down
33 changes: 23 additions & 10 deletions src/components/Calendar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { CALENDAR_SIZE, DATE_FORMAT } from "../../constants";
import DatepickerContext from "../../contexts/DatepickerContext";
import {
formatDate,
formatDateTimeToISO,
getDaysInMonth,
getFirstDayInMonth,
getFirstDaysInMonth,
Expand Down Expand Up @@ -50,13 +51,17 @@ const Calendar: React.FC<Props> = ({
}) => {
// Contexts
const {
hour,
minute,
periodDay,
period,
changePeriod,
changeDayHover,
showFooter,
changeDatepickerValue,
hideDatepicker,
asSingle,
asTimePicker,
i18n,
startWeekOn,
input
Expand Down Expand Up @@ -124,12 +129,16 @@ const Calendar: React.FC<Props> = ({
const ipt = input?.current;
changeDatepickerValue(
{
startDate: dayjs(start).format(DATE_FORMAT),
endDate: dayjs(end).format(DATE_FORMAT)
startDate: asTimePicker
? formatDateTimeToISO(start, hour, minute, periodDay)
: dayjs(start).format(DATE_FORMAT),
endDate: asTimePicker
? formatDateTimeToISO(end, hour, minute, periodDay)
: dayjs(end).format(DATE_FORMAT)
},
ipt
);
hideDatepicker();
if (!asTimePicker) hideDatepicker();
}

if (period.start && period.end) {
Expand Down Expand Up @@ -185,16 +194,20 @@ const Calendar: React.FC<Props> = ({
}
},
[
asSingle,
changeDatepickerValue,
changeDayHover,
changePeriod,
date,
hideDatepicker,
period.end,
period.start,
period.end,
showFooter,
input
input,
changeDatepickerValue,
asTimePicker,
hour,
minute,
periodDay,
hideDatepicker,
changeDayHover,
changePeriod,
asSingle
]
);

Expand Down
52 changes: 41 additions & 11 deletions src/components/Datepicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@ 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";
import useOnClickOutside from "../hooks";
import { Period, DatepickerType, ColorKeys } from "../types";
import { Period, DatepickerType, ColorKeys, PeriodDay } from "../types";

import { Arrow, VerticalDash } from "./utils";

Expand All @@ -22,6 +23,7 @@ const Datepicker: React.FC<DatepickerType> = ({
showShortcuts = false,
configs = undefined,
asSingle = false,
asTimePicker = false,
placeholder = null,
separator = "~",
startFrom = null,
Expand Down Expand Up @@ -61,6 +63,10 @@ const Datepicker: React.FC<DatepickerType> = ({
const [inputText, setInputText] = useState<string>("");
const [inputRef, setInputRef] = useState(React.createRef<HTMLInputElement>());

const [hour, setHour] = useState<string>("1");
const [minute, setMinute] = useState<string>("00");
const [periodDay, setPeriodDay] = useState<PeriodDay>("PM");

// Custom Hooks use
useOnClickOutside(containerRef, () => {
const container = containerRef.current;
Expand Down Expand Up @@ -93,6 +99,14 @@ const Datepicker: React.FC<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) => {
Expand Down Expand Up @@ -247,6 +261,7 @@ const Datepicker: React.FC<DatepickerType> = ({
const contextValues = useMemo(() => {
return {
asSingle,
asTimePicker,
primaryColor: safePrimaryColor,
configs,
calendarContainer: calendarContainerRef,
Expand All @@ -260,6 +275,12 @@ const Datepicker: React.FC<DatepickerType> = ({
changeInputText: (newText: string) => setInputText(newText),
updateFirstDate: (newDate: dayjs.Dayjs) => firstGotoDate(newDate),
changeDatepickerValue: onChange,
hour,
minute,
periodDay,
changeHour,
changeMinute,
changePeriodDay,
showFooter,
placeholder,
separator,
Expand All @@ -286,13 +307,20 @@ const Datepicker: React.FC<DatepickerType> = ({
};
}, [
asSingle,
asTimePicker,
safePrimaryColor,
configs,
hideDatepicker,
period,
dayHover,
inputText,
onChange,
hour,
minute,
periodDay,
changeHour,
changeMinute,
changePeriodDay,
showFooter,
placeholder,
separator,
Expand Down Expand Up @@ -347,15 +375,18 @@ const Datepicker: React.FC<DatepickerType> = ({
showShortcuts ? "md:pl-2" : "md:pl-1"
} pr-2 lg:pr-1`}
>
<Calendar
date={firstDate}
onClickPrevious={previousMonthFirst}
onClickNext={nextMonthFirst}
changeMonth={changeFirstMonth}
changeYear={changeFirstYear}
minDate={minDate}
maxDate={maxDate}
/>
<div>
<Calendar
date={firstDate}
onClickPrevious={previousMonthFirst}
onClickNext={nextMonthFirst}
changeMonth={changeFirstMonth}
changeYear={changeFirstYear}
minDate={minDate}
maxDate={maxDate}
/>
{asSingle && asTimePicker && <Time />}
</div>

{useRange && (
<>
Expand All @@ -376,7 +407,6 @@ const Datepicker: React.FC<DatepickerType> = ({
)}
</div>
</div>

{showFooter && <Footer />}
</div>
</div>
Expand Down
10 changes: 7 additions & 3 deletions src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { PrimaryButton, SecondaryButton } from "./utils";

const Footer: React.FC = () => {
// Contexts
const { hideDatepicker, period, changeDatepickerValue, configs, classNames } =
const { asTimePicker, period, configs, classNames, changeDatepickerValue, hideDatepicker } =
useContext(DatepickerContext);

// Functions
Expand All @@ -34,8 +34,12 @@ const Footer: React.FC = () => {
onClick={() => {
if (period.start && period.end) {
changeDatepickerValue({
startDate: dayjs(period.start).format(DATE_FORMAT),
endDate: dayjs(period.end).format(DATE_FORMAT)
startDate: asTimePicker
? dayjs(period.start).toISOString()
: dayjs(period.start).format(DATE_FORMAT),
endDate: asTimePicker
? dayjs(period.end).toISOString()
: dayjs(period.start).format(DATE_FORMAT)
});
hideDatepicker();
}
Expand Down
13 changes: 11 additions & 2 deletions src/components/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const Input: React.FC<Props> = (e: Props) => {
hideDatepicker,
changeDatepickerValue,
asSingle,
asTimePicker,
placeholder,
separator,
disabled,
Expand Down Expand Up @@ -70,7 +71,7 @@ const Input: React.FC<Props> = (e: Props) => {

const dates = [];

if (asSingle) {
if (asSingle || asTimePicker) {
const date = parseFormattedDate(inputValue, displayFormat);
if (dateIsValid(date.toDate())) {
dates.push(date.format(DATE_FORMAT));
Expand Down Expand Up @@ -114,7 +115,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(
Expand Down
Loading