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.

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

Need better guidance on selecting date and time #459

Closed
mcarrano opened this Issue Oct 19, 2017 · 49 comments

Comments

Projects
None yet
8 participants
@mcarrano
Member

mcarrano commented Oct 19, 2017

1. Choose the type of contribution for this pattern:

  • [ x] This is a new pattern
  • This is an enhancement on an existing pattern

2. If this enhancement or new pattern was made for an application, specify which one.

3. Title: Date and Time

4. Use Cases + Requirements

  • User wants to set a date, time, or date and time.
  • User wants to set a date range for filtering.
    We currently have Datepicker and Timepicker widgets but no guidance on how to use these in common use cases.

5. References

None

6. Design Concepts

None

7. Scope

Research and design

8. Assign

9. Pattern Name + Location

Propose "Date and Time" to be added to forms and controls.

@mcarrano mcarrano added this to New / Needs Info in PatternFly Contributions Oct 19, 2017

@mcarrano

This comment has been minimized.

Member

mcarrano commented Oct 19, 2017

@serenamarie125 will consider if we have a resource to work on this.

@jeperry

This comment has been minimized.

Member

jeperry commented Oct 19, 2017

Sam Linville worked on a date range picker, so when this is picked up we should look at this. https://redhat.invisionapp.com/share/ZBCBL4UP6#/screens/256225779

@mcarrano mcarrano moved this from New / Needs Info to Discovery in PatternFly Contributions Oct 19, 2017

@mcarrano

This comment has been minimized.

Member

mcarrano commented Nov 9, 2017

@serenamarie125 will look at whether there is an available resource.

@mcarrano mcarrano moved this from Discovery & Concept Design to Accepted-ToDo/Backlog in PatternFly Contributions Nov 20, 2017

@mcarrano mcarrano added the Medium label Jan 17, 2018

@mcarrano mcarrano removed the Help Wanted label Feb 12, 2018

@mcarrano

This comment has been minimized.

Member

mcarrano commented Feb 12, 2018

Thanks for offering to take this on @nding-anges When you are ready, please just attach your proposal for review.

@mcarrano mcarrano moved this from Accepted-ToDo/Backlog to Discovery & Concept Design in PatternFly Contributions Feb 12, 2018

@nding-anges

This comment has been minimized.

Contributor

nding-anges commented Mar 27, 2018

@mcarrano Please find the first version of " Selecting date and time - Concept Design " with this link:
https://docs.google.com/document/d/1evHUQwFY7KaVg0xgltUdqX92jMKgS71YjQCZu6yBLIk/edit?usp=sharing

@mcarrano

This comment has been minimized.

Member

mcarrano commented Mar 27, 2018

@jeperry @serenamarie125 @catrobson @maryclarke @kybaker @LHinson please review. @matthewcarleton would also like you to take a look. This implies extending what we currently support now for our date and time picker so want to make sure that we can integrate these suggestions into our existing component set.

@mcarrano mcarrano moved this from Discovery & Concept Design to Preliminary Review in PatternFly Contributions Mar 29, 2018

@nding-anges

This comment has been minimized.

Contributor

nding-anges commented Apr 12, 2018

@mcarrano I made a new design proposal in Invision and put all component for completeness. It was based on the reference of Bootstrap , which is suggested by Liz Clayton, see detail here: https://redhat.invisionapp.com/share/TZGSUJZXG9A#/290220418_Date_-time_Selector_Proposal_A
We could comment on that and after I go back to finalize the design guidance.

@maryclarke

This comment has been minimized.

Member

maryclarke commented Apr 16, 2018

Added some comments to the Invision doc.

@nding-anges

This comment has been minimized.

Contributor

nding-anges commented Apr 24, 2018

Hi Matt, @mcarrano
After internal discussion of our UX team , I made a new alternative design - proposal C.
The differences compared with previous design are basically focus on date-time picker and date-time range picker. These two components in Proposal A are using a picker associated time picker and calendar, and in Proposal C, time picker and calendar are separately.

The improving points of Proposal C are summarized below :

  1. Better for responsive design
  2. Make the picker more simple and separate task for user.(e.g: On using date-time range picker, if user just want to just modify minute or hour , they don’t need to open a complete picker for changing it.)
  3. Easy for development

Please have a look and compare with them. I am looking forward to gathering more opinion from our team.

The Proposal link:

Proposal C: https://redhat.invisionapp.com/share/TZGSUJZXG9A#/293134549_Date_-time_Selector_Proposal_C

Proposal A: https://redhat.invisionapp.com/share/TZGSUJZXG9A#/290220418_Date_-time_Selector_Proposal_A

@mcarrano

This comment has been minimized.

Member

mcarrano commented Apr 24, 2018

@nding-anges Thanks for providing this additional proposal. Agree that separating date and time makes this easier. I left a few questions/comments on your InVision project.

As for next steps with this, now that we are beginning work on PatternFly-next, I'm reluctant to make any major changes to our existing date and time picker approach. I do think that this research is useful for informing our next generation designs, however. Perhaps we can think about testing some of these alternatives using an interactive prototype?

The only exception to the above is that I would like to have better guidance on selecting a date range. We do not have a good solution to that today. Please take a look at what's on this test page: https://rawgit.com/patternfly/patternfly/master-dist/dist/tests/bootstrap-datepicker.html and look specifically at the date range example. Perhaps we can look at updating that based on your recommendations. What would you suggest that we change?

@nding-anges

This comment has been minimized.

Contributor

nding-anges commented Apr 25, 2018

@mcarrano OK.I get your point. So to thinking about PF next , the first priority task for now is time range design by making less changes and providing better guidance for it. I will work on this firstly. And I just saw The issue #336, that is a good use case. We could thinks about how could be a appropriate design and relative guidance based on that .

@nding-anges

This comment has been minimized.

Contributor

nding-anges commented Apr 28, 2018

@mcarrano Hi Matt, Please find the first version of " Date Range Design and Guidance " with this link:https://docs.google.com/document/d/1pOMxt6rqJgH0_jc0dDWQhH0IfMwjvSWCMRNxl-TMhZA/edit?pli=1

@mcarrano

This comment has been minimized.

Member

mcarrano commented Apr 30, 2018

@nding-anges Looks good, but just a question. I see two proposals and not sure how to evaluate them. Is proposal A the one that is more aligned with the current Datepicker we are using? If so, see my questions/comments. @matthewcarleton can you also take a look. Do you see anything that would be problematic from an implementation standpoint?

@jeperry @maryclarke @serenamarie125 @catrobson would also like some input on requirements here for date range filtering. Besides selecting events taking place within a range of dates, do we need to consider situations where either start or end date is unbounded, i.e. show me all events before or show me all events after ? Do we have those use cases in product?

@jeperry

This comment has been minimized.

Member

jeperry commented May 2, 2018

situations where either start or end date is unbounded, i.e. show me all events before or show me all events after

I'm sure that we do, but I don't think a single control needs to also handle all of these cases. Instead, I'd expect this to be handled as by combining existing controls. For example, a picker to select the input I want to provide (days before, exact day, days after, or specific range.)

@nding-anges

This comment has been minimized.

Contributor

nding-anges commented May 2, 2018

@mcarrano The Proposal A is the one that is more aligned with the date range example on this test page: https://rawgit.com/patternfly/patternfly/master-dist/dist/tests/bootstrap-datepicker.html and I have made some little changes. The proposal B is more improved in term of usability that some of our products are using a date range pattern like this. Since it is a completely a new pattern from an implementation standpoint, I am not sure if it will be better for the next phrase on considering of PatternFly Next. What are your thoughts?

@mcarrano

This comment has been minimized.

Member

mcarrano commented May 4, 2018

@nding-anges Before we commit to a design approach, I'd like to see us create a working prototype of this. If possible we'd like you to work with @dabeng to create a new test page that demonstrates the following use cases:

  • Picking a single date or time.
  • Picking a date range
  • Picking a date and time in combination.

We'd like you to begin with trying to utilize the existing Bootstrap Datepicker since we already have that in the library, but you may explore other approaches if they will lead to a more usable solution. What I want to ensure is that we have a recommendation for implementation that goes along with our design advise. Let me know if you have any questions. Would be glad to set up a time to meet if we need to discuss live.

@LHinson FYI

@dabeng

This comment has been minimized.

Contributor

dabeng commented May 14, 2018

Hi @nding-anges , I have enable toady button of bootstrap datetimepicker - https://rawgit.com/dabeng/patternfly/date-range-dist/dist/tests/time-picker2.html

@mcarrano

This comment has been minimized.

Member

mcarrano commented May 14, 2018

@nding-anges @dabeng The icon for "today" does not make sense to me. I wouldn't know what that was. I think we should either find a better icon or consider making both of these actions with labels of some type

@dabeng

This comment has been minimized.

Contributor

dabeng commented May 16, 2018

Hi @mcarrano I added custom code to replace icons of action buttons with text as shown below:

screen shot 2018-05-16 at 8 40 15 am

screen shot 2018-05-16 at 9 27 36 am

@dabeng

This comment has been minimized.

Contributor

dabeng commented May 16, 2018

Prototypes based on bootstrap datetimepicker

Additional Info:

  1. bootstrap datetimepicker itself can not provide "select range in one input" feature .

  2. bootstrap datetmepicker can not allow users to select range in one calendar.

  3. However, there is no doubt that above two demands have practical significance.

  4. With the help of a huge mount of custom code, now the example "Date Range with single Calendar" is able to fulfill these demands.

    screen shot 2018-05-16 at 9 39 21 am
@mcarrano

This comment has been minimized.

Member

mcarrano commented May 16, 2018

Great work @dabeng ! Just a couple of comments. I like this better with the text buttons for Today and to toggle between date and time pickers. But I think we could use some work on styling to ensure that the user sees these as actions. @nding-anges cam you make some recommendations here?

Regarding the addition of custom Javascript to create a date range picker with the single calendar, I'm not sure whether that's something we want to introduce to core PatternFly. @matthewcarleton @dgutride would be interested in hearing what you think. If not, then we should stick with the two-input approach that is achieved with the existing Datepicker.

@matthewcarleton

This comment has been minimized.

Contributor

matthewcarleton commented May 17, 2018

I would say that we should stay away from it for core. We wouldn't introduce this with custom JS for PF-next so core should be the same.

@mcarrano

This comment has been minimized.

Member

mcarrano commented May 17, 2018

Thanks @matthewcarleton .

@nding-anges can you please proceed with finalizing the design and creating a new Date and Time pattern to replace the current Datepicker in Forms and Controls? I think that the design page can show these various options with a note that the single date range picker will not be available in PatternFly core, but can be an alternative approach for JS implementations. Let me know if you have questions.

@dabeng

This comment has been minimized.

Contributor

dabeng commented May 18, 2018

Hi @matthewcarleton Is it our explicit convention to exclude the patterns or demos which contain custom js code snippets ?

@nding-anges

This comment has been minimized.

Contributor

nding-anges commented May 21, 2018

Hi Matt

I just want to confirm 3 small issues with you that summary as below:

  1. Design of Today and Time Button need to be reviewed.
    today and time

  2. The Single Date picker on currently patternFly will replaced by components based on Bootstrap date time picker that @dabeng did as prototype, I will also make all components using a same UI design .

  3. After I discuss with @dabeng , we recommend that do not add the single calendar design in design note , as it is not completely design solution and we have some unsure implement issues , Any thought?

@mcarrano

This comment has been minimized.

Member

mcarrano commented May 21, 2018

@nding-anges See my responses to your questions:

  1. I'm not sure that either option works for me completely. I definitely would avoid Option B because it does not seem right that one action is a link style and the other is a button. So option A seems closer, but I'm not sure that the "v" is right. It indicates that this is a dropdown to me which I know is not the case. Maybe something like "Time ->" to indicate navigation to a new panel? Don't know. Perhaps you can try some other options. And it would be good to see what the Timepicker looks like then. How do I get back to Date?

  2. Yes, that's what I expect.

  3. If you and @dabeng think it's best to leave the single calendar date range picker out for now, I'm OK with that. It keeps things simpler.

@nding-anges

This comment has been minimized.

Contributor

nding-anges commented May 22, 2018

Thanks! @mcarrano
Regarding Time button , I also think that using a symbol to indicate navigation will be better.But since the new panel will get in from bottom to top, something like " ^ " maybe indicate clearly the direction.
Otherwise, I think that Option A is more clear to inform which panel user will enter and which they will come back to. What do you think?
See more detail
today - time

@mcarrano

This comment has been minimized.

Member

mcarrano commented May 22, 2018

Option A makes more sense to me @nding-anges My only question is about what the 'Today' action does in the Time picker. Maybe that should change to something like 'Now' in case I want to set the time to the current time?

@dabeng

This comment has been minimized.

Contributor

dabeng commented May 23, 2018

Hi @nding-anges @mcarrano I have added btn-link for datetime fields. And in order to prepend icon, I have to use font-family: FontAwesome; As a result, fonts in action buttons are different from other fonts in calendar.

Currently, bootstrap datetimepicker doesn't provide the APIs to switch action buttons' caption between calendar view and clock view. If necessary, I can try to add trick code to fulfill this demand:

'Today' button should change to 'Now' button in case I want to set the time to the current time

@nding-anges

This comment has been minimized.

Contributor

nding-anges commented May 23, 2018

That makes sense. "Now" is better. We just need to confirm with @dabeng to see whether it could be customized separately. And I did the first version of Design note, https://docs.google.com/document/d/1kVAhNzSB-szucfeGgq815dB6e214WavZ-gqRR0Sydj0/edit?usp=sharing @mcarrano please have a review.

@mcarrano

This comment has been minimized.

Member

mcarrano commented May 23, 2018

@nding-anges Thanks for posting the design document. I did not have a chance today, but will try to review by the end of this week and give you some feedback.

@mcarrano

This comment has been minimized.

Member

mcarrano commented May 24, 2018

@nding-anges I reviewed and adding some comments. Please make one more round of edits and then I will circulate this for review with the other UX leads before we proceed with sending a PR.

@nding-anges

This comment has been minimized.

Contributor

nding-anges commented May 28, 2018

@mcarrano Thanks so much for all suggestions. I just did some modifications, please have a look.

@mcarrano

This comment has been minimized.

Member

mcarrano commented May 29, 2018

Looks much better @nding-anges . I will submit this for review and comment by the UX Leads this week. Assuming they are in agreement with the approach, we can then go forward with sending a PR. Thanks.

@mcarrano

This comment has been minimized.

Member

mcarrano commented Jun 5, 2018

@nding-anges So I think we are good to move forward with taking what you've done so far and creating a PR to add this to the Forms and Controls section of the design library. Please replace the existing Datepicker with this. Let mw know if you have questions.

@vconzola

This comment has been minimized.

Member

vconzola commented Jun 5, 2018

@mcarrano Is this ready to be used? I have an application for a date/time picker in VM Migration. Also, this is going into pf-core, correct?

@mcarrano

This comment has been minimized.

Member

mcarrano commented Jun 5, 2018

@vconzola Yes, the plan is to put this into PF Core. It leverages the current Bootstrap widget, so there is minimal dev work to be done. You should feel free to use this approach and let @nding-anges and I know if you see any issues with applying this.

@nding-anges

This comment has been minimized.

Contributor

nding-anges commented Jun 6, 2018

@mcarrano Ok, I'll send the PR A.S.A.P

@nding-anges nding-anges referenced this issue Jun 7, 2018

Merged

New Date and Time picker #676

2 of 6 tasks complete
@dabeng

This comment has been minimized.

Contributor

dabeng commented Jun 15, 2018

Hi @mcarrano Is there any other comments before sending PR ?

@mcarrano

This comment has been minimized.

Member

mcarrano commented Jun 15, 2018

I think we are good to go @dabeng . I created a new issue in PF Core and assigned to you for tracking: patternfly/patternfly#1078

@mcarrano mcarrano removed this from Preliminary Review (Checkpoint 1) in PatternFly Contributions Sep 7, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment