Update DateRange.tsx #2034
Update DateRange.tsx #2034
Conversation
Rounding Function: The roundToNearest15Minutes function rounds the selected time to the nearest 15 minutes. Handle Change Logic: The handleChange function has been modified to use the rounding function before dispatching the updated date values. Complete Component: The full DateRange component is included for context, with both date and datetime pickers supported.so;ve issue Avaiga#1452
There was a problem hiding this comment.
Good work @Aryam2121
I think this issue needs a bit more thinking before implementation.
In the code you propose, every component is impacted by the stepping to 15 minutes.
I think this feature should be optional and configurable and should be applied before user selection to limit the available choices.
It should also apply to date_selector and time_selector.
If you provide code, you need also to provide tests.
| @@ -6,8 +6,8 @@ | |||
| * | |||
| * http://www.apache.org/licenses/LICENSE-2.0 | |||
| * | |||
| * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on | |||
| * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the | |||
There was a problem hiding this comment.
please do not modify head comment as it is generated and eventually replaced automatically.
| @@ -54,7 +62,7 @@ const getRangeDateTime = ( | |||
| try { | |||
| dates = JSON.parse(json); | |||
| } catch { | |||
| // too bad | |||
| // Handle error if JSON parsing fails | |||
There was a problem hiding this comment.
we don't want to handle this error
| @@ -86,7 +94,7 @@ const DateRange = (props: DateRangeProps) => { | |||
| (v: Date | null, start: boolean) => { | |||
| setValue((dates) => { | |||
| if (v !== null && isValid(v)) { | |||
| const newDate = getTimeZonedDate(v, tz, withTime); | |||
| const newDate = roundToNearest15Minutes(getTimeZonedDate(v, tz, withTime)); // Round to nearest 15 mins | |||
There was a problem hiding this comment.
this behavior should be optional and commanded by a property.
I propose that this property would be set the value in time format (hh:mm:ss) so that we can define before showing the time selector, which times the user can select
I propose the property name: time_step
In this example, time_step=00:15
or time_step=01:00 for letting the user select only time on the hour.
This should also apply to date_selector and time_selector
| width={props.width} | ||
| disabled | ||
| label={props.labelStart} |
There was a problem hiding this comment.
I don't understand those changes.
- Why change the width ?
- Field has no
disabledorlabelproperty
timeStep Prop: Control the rounding by passing a timeStep prop (e.g., 15 for 15-minute intervals). Testing: Implement unit tests outside of this file to validate the functionality and edge cases of rounding behavior. UI Considerations: The layout remains responsive and adjusts to the presence or absence of withTime.solve issue Avaiga#2034
FredLL-Avaiga
added
📈 Improvement
New timeStep Prop: An optional timeStep prop allows the user to define how time is rounded (e.g., to the nearest 15 minutes). roundToStep Function: This function applies the rounding logic, adjusting the minutes of a selected time to the nearest multiple of the provided timeStep. handleChange Function: Before dispatching the updated time, it applies the rounding logic if the timeStep prop is provided.solve issue Avaiga#1452 and updated Avaiga#2034
New timeStep Prop: An optional timeStep prop allows the user to define how time is rounded (e.g., to the nearest 15 minutes). roundToStep Function: This function applies the rounding logic, adjusting the minutes of a selected time to the nearest multiple of the provided timeStep. handleChange Function: Before dispatching the updated time, it applies the rounding logic if the timeStep prop is provided solve issue Avaiga#1452 and updated code as per review Avaiga#2034
|
Are you still working on this PR @Aryam2121 ? |
|
i update my Branch already as your requirements you have to check the updated branch i want you review my updated branch |
I'll review it once you have fixed the conflicts |
|
so you merge this please i already fixed all conflicts |
|
|
This PR has been labelled as "🥶Waiting for contributor" because it has been inactive for more than 14 days. If you would like to continue working on this PR, then please add new commit or another comment, otherwise this PR will be closed in 14 days. For more information please refer to the contributing guidelines. |
github-actions
bot
added
the
🥶Waiting for contributor
|
Does not do much - and certainly not enough. |
Rounding Function: The roundToNearest15Minutes function rounds the selected time to the nearest 15 minutes.
Handle Change Logic: The handleChange function has been modified to use the rounding function before dispatching the updated date values.
Complete Component: The full DateRange component is included for context, with both date and datetime pickers supported.so;ve issue #1452