From 9c4c52d27c5eddc0428d5fa1f81ff21a56571c3f Mon Sep 17 00:00:00 2001 From: Dovile Date: Mon, 22 Jan 2024 15:49:50 +0100 Subject: [PATCH 1/5] time selection fix --- src/components/fields/TimePicker.tsx | 36 +++++++++++++++++++++++----- 1 file changed, 30 insertions(+), 6 deletions(-) diff --git a/src/components/fields/TimePicker.tsx b/src/components/fields/TimePicker.tsx index 8105d03..c013584 100644 --- a/src/components/fields/TimePicker.tsx +++ b/src/components/fields/TimePicker.tsx @@ -1,6 +1,6 @@ import { format } from 'date-fns'; import lt from 'date-fns/locale/lt'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import DatePicker, { registerLocale } from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import styled from 'styled-components'; @@ -33,6 +33,32 @@ const TimePicker = ({ maxDate, }: TimepickerProps) => { const [open, setOpen] = useState(false); + const [time, setTime] = useState(null); + + const getTimeInterval = (time?: Date) => { + if (time) { + const minutes = time.getMinutes(); + if (minutes < 30) { + const d = new Date(time.setMinutes(30, 0, 0)); + return d; + } else { + const hours = time.getHours(); + if (hours < 23) { + const d = new Date(time.setHours(hours + 1, 0, 0, 0)); + return d; + } + } + } + return null; + }; + + useEffect(() => { + if (!value) { + setTime(null); + } else { + setTime(getTimeInterval(value)); + } + }, [value]); const handleBlur = (event: any) => { if (!event.currentTarget.contains(event.relatedTarget)) { @@ -64,7 +90,7 @@ const TimePicker = ({ showError={true} label={label} padding={padding} - value={value ? format(new Date(value), 'HH:mm') : ''} + value={time ? format(new Date(time), 'HH:mm') : ''} error={error} rightIcon={} disabled={disabled} @@ -79,21 +105,19 @@ const TimePicker = ({ {...(minDate ? { minDate: new Date(minDate) } : {})} showTimeSelectOnly timeIntervals={30} - selected={value ? new Date(value as any) : null} + selected={null} onChange={(date: Date) => { if (maxDate && date > new Date(maxDate)) { return onChange(maxDate); } - if (minDate && date < new Date(minDate)) { return onChange(minDate); } - onChange(date); setOpen(false); }} inline - > + /> ) : null} ); From 3d8e56610f7ba127b10e55dad844aa15d2924d1f Mon Sep 17 00:00:00 2001 From: Dovile Date: Mon, 22 Jan 2024 15:52:18 +0100 Subject: [PATCH 2/5] open calendar on input click --- src/components/fields/DatePicker.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/fields/DatePicker.tsx b/src/components/fields/DatePicker.tsx index 6deafb8..798ca07 100644 --- a/src/components/fields/DatePicker.tsx +++ b/src/components/fields/DatePicker.tsx @@ -104,6 +104,7 @@ const Datepicker = ({ placeholder="2000-01-01" className={className} onChange={handleChange} + onInputClick={() => setOpen(!open)} label={label} padding={padding} value={textValue} From 3287791d821747661479792409b9acb0b4d5a79e Mon Sep 17 00:00:00 2001 From: Dovile Date: Tue, 23 Jan 2024 17:50:15 +0100 Subject: [PATCH 3/5] minor fix --- src/components/fields/TimePicker.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/fields/TimePicker.tsx b/src/components/fields/TimePicker.tsx index c013584..2c0f826 100644 --- a/src/components/fields/TimePicker.tsx +++ b/src/components/fields/TimePicker.tsx @@ -38,6 +38,9 @@ const TimePicker = ({ const getTimeInterval = (time?: Date) => { if (time) { const minutes = time.getMinutes(); + if (minutes === 30 || minutes == 0) { + return time; + } if (minutes < 30) { const d = new Date(time.setMinutes(30, 0, 0)); return d; @@ -105,7 +108,7 @@ const TimePicker = ({ {...(minDate ? { minDate: new Date(minDate) } : {})} showTimeSelectOnly timeIntervals={30} - selected={null} + selected={time} onChange={(date: Date) => { if (maxDate && date > new Date(maxDate)) { return onChange(maxDate); From 17b6a57e5ab5da1b2f825d03fac3329d48a4e3c5 Mon Sep 17 00:00:00 2001 From: Dovile Date: Tue, 23 Jan 2024 18:05:08 +0100 Subject: [PATCH 4/5] minor fix --- src/components/fields/TimePicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/fields/TimePicker.tsx b/src/components/fields/TimePicker.tsx index 2c0f826..23e7454 100644 --- a/src/components/fields/TimePicker.tsx +++ b/src/components/fields/TimePicker.tsx @@ -38,7 +38,7 @@ const TimePicker = ({ const getTimeInterval = (time?: Date) => { if (time) { const minutes = time.getMinutes(); - if (minutes === 30 || minutes == 0) { + if (minutes === 30 || minutes === 0) { return time; } if (minutes < 30) { From b280e28bd15b8816d0b4ca969e52f947c524286c Mon Sep 17 00:00:00 2001 From: Dovile Date: Wed, 24 Jan 2024 12:15:09 +0100 Subject: [PATCH 5/5] time interval calculation --- src/components/fields/TimePicker.tsx | 24 ++++++++---------------- 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/src/components/fields/TimePicker.tsx b/src/components/fields/TimePicker.tsx index 23e7454..8659be8 100644 --- a/src/components/fields/TimePicker.tsx +++ b/src/components/fields/TimePicker.tsx @@ -36,23 +36,15 @@ const TimePicker = ({ const [time, setTime] = useState(null); const getTimeInterval = (time?: Date) => { - if (time) { - const minutes = time.getMinutes(); - if (minutes === 30 || minutes === 0) { - return time; - } - if (minutes < 30) { - const d = new Date(time.setMinutes(30, 0, 0)); - return d; - } else { - const hours = time.getHours(); - if (hours < 23) { - const d = new Date(time.setHours(hours + 1, 0, 0, 0)); - return d; - } - } + if (!time) { + return null; } - return null; + const minutes = Math.ceil(time.getMinutes() / 30) * 30; //result = 30 | 60 min + const hours = time.getHours(); + if (minutes === 60 && hours === 23) { + return null; //if almost midnight, return null as there is no available time option today. + } + return new Date(time.setMinutes(minutes, 0, 0)); //adds 1 hour if minutes = 60; }; useEffect(() => {