Feature: PDateRangeSelect #1048
Conversation
pleek91
requested review from
znicholasbrown,
zhen0 and
brandonreid
as code owners
✅ Deploy Preview for prefect-design ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Updated because the PDatePicker component has the floating styles now. I think "Picker" implies its not designed to be put directly on the page.
There was a problem hiding this comment.
Functionally the same except one tweak to makes sure the startDate and endDate are startOfMinute and endOfMinute respectively. Added an event for when the range is applied.
|
Being able to select the relative time windows and to scroll through them is very cool! |
|
@zhen0 I think I address all of your comments if you'd like to look at this again. |
|
Is it possible to have it so I can select a specific end time? It keeps resetting when I try to change the end time Screen.Recording.2023-12-12.at.11.19.59.AM.mov |
|
Sorry @pleek91 one other thing I didn't catch in my first run through. The rest is looking nice! |
|
@zhen0 what browser? I don't have any issues changing the times in chrome. |
|
Ah please ignore my review, that was supposed to be a comment; I've seen the behavior @zhen0 is describing. It's also easy to break the input by accidentally pressing > 4 numbers while the year is selected in the calendar view. The only way to escape that that I've found is to refresh |
|
@znicholasbrown I can reproduce the > 4 numbers in the year position. Will investigate. Still unable to reproduce the other issue. Maybe one of you can pair with me on that |
|
@pleek91 select a date range (any date will do) then select the end time hour and press "0" to replicate that one I believe, lmk if that doesn't do it for you |
|
@znicholasbrown ah yep the "0" works. TY |
|
Sorry, I did not mean to close this with my comment, that shouldn't be an option for a maintainer lol |
pleek91
force-pushed
the
date-range-select
branch
from
936c25e to
c85c433
Compare
|
@znicholasbrown and @zhen0 I believe I've fixed the two issues you ran into. |
|
Yep! LGTM! |
Description
The date range select is a new component for selecting date ranges either of a fixed date/time or a relative time span like "Past 15 minutes".
It has a single v-model that returns a value based on the user's selection. If a relative value is selected the number of seconds in the selected span is returned. If a fixed range is selected the start and end dates are returned. This value can be type guarded with the
modelValue.typewhich is eitherspanorrangeRecommend checking out the deploy preview and playing around this the component.
Relative span
Fixed date range
