nimble-date-picker Component

vikisekarNI commented 2 years ago

😯 Problem to Solve

To conveniently pick a date through a date-picker input. This comes from one of HLD requirement's in Argon here

User should be able to see a small calendar icon to the right of date input
User should be able to select a date from the expanded calendar view. He/she should be able to scroll through days, months and years
User should be able to type in the date in a standard format. For ex: DD/MM/YYYY

Adobe XD View - Password: Soliton@123 – Reach out to Roshan(roshan.raju@ni.com) / John Nakano (john.nakano@ni.com) for getting Adobe XD Design files

💁 Proposed Solution

Design

842

Create a nimble date picker component. Inspired from Material's Date Picker

📋 Tasks

[ ] nimble-date-picker interaction design issue
[ ] nimble-date-picker interaction design spec
[ ] nimble-date-picker visual design issue
[ ] nimble-date-picker visual design spec
[ ] nimble-date-picker spec
[ ] nimble-date-picker custom element
[ ] nimble-date-picker unit tests
[ ] nimble-date-picker Storybook tests
[ ] nimble-date-picker Storybook docs
[ ] nimble-date-picker Angular wrapper
[ ] nimble-date-picker Blazor wrapper
[ ] Add to Angular example app
[ ] Add to Blazor example app
[ ] Update Component Status table in README and incubating status

rajsite commented 2 years ago

Fast date picker PR: https://github.com/microsoft/fast/pull/5539

fredvisser commented 2 years ago

Per Leslie: "Here's a spec for a date/time control I made for LabVIEW in, wait for it... 2017. But my feeling is that some of the interactions would be similar, although we might want to do the whole Material/whoever clock picker and not just dropdowns."

jattasNI commented 2 years ago

We received some feedback from Christina about displaying dates/times in WebVIs. Good reminder that there is likely work to do even for read-only display of dates/times.

I severely under-estimated the value of time formatting for WebVIs back in the day. I’ve gotten numerous people complaining to me that “system” time doesn’t cut it for engineering applications, especially with a global audience.

Please keep this in mind when Nimble tackles date/time. It would be great if there was a simple way to do a per-app locale setting, too. (Maybe we could somehow mimic what Angular does?)

nate-ni commented 1 year ago

Interesting time picker from google for Firebase.

Couple nice things:

Easily scrollable with trackpad, mouse wheel, or touch (video shows trackpad scrolling)
Tab/Shift+Tab works "as expected"
Inc/Dec with arrows works "as expected"
Typing values works "as expected"

https://user-images.githubusercontent.com/109235103/188994370-091a4da2-252d-4112-9101-7165f51d3276.mp4

jattasNI commented 1 year ago

Florina from the team that owns the SLE Executions and Routines apps reached out with another use case for the date picker. For Q4 featre F1881164 (Time-triggered routines frontend) they need to be able to pick a date and time that a job will run.

That screenshot comes from Leslie's wireframe so hopefully she can provide more detailed requirements for this use case.

jattasNI commented 1 year ago

Update on the UI in the comment above: as a workaround while they wait for the Nimble date/time picker they ended up using a single component (from Angular Material) that allows selecting both date and time. They'd likely prefer separate components in order to match the wire frame above. More conversation in this HLD PR.

jattasNI commented 1 year ago

Here's an interesting thread going deep on the pros and cons of native date pickers and calendar controls for picking dates. The author ended up deciding to use three separate inputs to enter a date on their site (select for month, numeric text for day and year). Looks like the UK.gov design system linked in the comments made a similar choice. I'm not saying this conclusion applies to us, just reminding us that there are ways to enter a date that don't involve a calendar and we should consider what types of dates we'll be requesting from our users.

nate-ni commented 1 year ago

just reminding us that there are ways to enter a date that don't involve a calendar and we should consider what types of dates we'll be requesting from our users.

100%. I try to create a separation between absolute dates (e.g. birth date, expiration date, etc.) and relative dates (e.g. whatever date next Thursday is, a Sunday in mid-March, etc.). "Absolute" and "Relative" may not be the best terms here but I don't have a better set right now.

For the first, the separate pickers/inputs is a good solution. For the latter, a calendar view is very helpful, if not required.

I imagine both are relevant for our clients depending on their context/app and we'll have to see what component (or set of components) will support it well.

jattasNI commented 1 year ago

This came up again in a request from an NI partner developing SystemLink plugins using Nimble. Their current workaround is to use a Nimble text field with textField.elementRef.nativeElement.control.type = 'date'; which actually gets the job done but doesn't have styling for the calendar.

See this demo on MDN to play with this in different browsers.

SPathani-NI commented 8 months ago

I would also like this component for my use case. Currently I am also using the hack mentioned above, however it still gives its output in type "string" which the user has to manually change to type "Date".

jattasNI commented 4 months ago

I came across this date picker today: https://fymmot.github.io/inclusive-dates/ It's a web component that supports inputs via localized natural language inputs like "next Monday" (and also via a normal calendar picker).

Not necessarily saying we should use it or even be inspired by it, but it's fun!

jattasNI commented 3 months ago

Removing the 'blocked' label because we don't plan to wait on FAST to implement this. No change in its priority for now, but we are not blocked from proceeding.

atmgrifter00 commented 3 months ago

Another possible option is Cally, which is a pretty lightweight option, but allows fairly easy styling and slotting for certain things like using Nimble buttons for the 'Next' and 'Previous' buttons to move between months. It could be missing features that we ultimately want, like a dropdown to move between years, etc..., but it's worth considering.

Here is an early prototype branch (link to working Angular example).

ni / nimble