Date & Time Picker

[garritfra]

Is your feature request related to a problem? Please describe.

I need a way to pick a date and a time. A lot of Frameworks I know (including Bootstrap!) are lacking this Feature, even though it's quite an essential Component.

Describe the solution you'd like

AntDesign has a very neat implementation, maybe that can be a starting point.

Describe alternatives you've considered

None

[alesvaupotic]

Combine pickers with display. Prepare for i18n, manual input, expose machine-readable (like "2020-01-15") formats as well as human-readable display (like "an hour ago").

[claviska]

The makers of Duet DS rolled their own using Stencil and are rumored to be open sourcing it soon. They spent a lot of time ensuring the component is accessible and lightweight, so I'd like to see if that's something that makes sense to incorporate into Shoelace.

I'm not interested in writing and maintaining a date/time picker from scratch, so this will either be that 👆 or a wrap of a vanilla date picker.

Possible candidates for wrapping:

• https://flatpickr.js.org/
• https://wakirin.github.io/Litepicker/

Feel free to suggest other vanilla, minimal dependency alternatives.

[alesvaupotic]

I've used flatpickr before with good results.

[next-direction]

Used flatpickr too in the past, so far there was nothing I couldn't do with it.

[MisterAnmar]

in the current browsers the date picker is implemented and getting better. Why not a calendar that can be extended for events and scheduler. Just a thought. basic features. Select start day (Week) can add a marker on days contain event has event listener on the day div container for results after event. possibly by ajax json

[EugeneDae]

The makers of Duet DS rolled their own using Stencil and are rumored to be open sourcing it soon.

Already: https://github.com/duetds/date-picker

Looks very nice. I'd love to see it in Shoelace.

[matthewp]

Quick size comparison (all gzipped):

Litepicker	Duet	flatpickr
13.9 kB	11.54 kB	14 kB

[claviska]

I don't think 812 B is accurate for Duet. It may be the size of the lazy loader script, but that doesn't include the component itself.

[matthewp]

Could be, this was a quick check in curl. I'll look again on the demos.

[matthewp]

I've updated the table after examining Duet's demo pages.

[devmount]

I'm just using <sl-input type="date"></sl-input> which is working fine for me.

[macta]

I'm just using <sl-input type="date"></sl-input> which is working fine for me.

This should be updated in the docs as it wasn't obvious to me but makes sense in retrospect

[devmount]

I guess it's not in the docs because it's not officially supported by Shoelace, there may be unwanted side effects. But as long as there is no native Shoelace date picker this is enough for me.

[claviska]

It seems to work fine, but I probably wouldn't use it for anything cross-browser. My concern is that Safari doesn't support it, although it's available in Safari TP (but it's very tiny and hard to use):

I hope they make it bigger. For comparison, here's Firefox:

And Chrome:

Another thing to note is that Chrome is the only browser to implement a visual cue. This is good and bad. It's good that the user is tipped off that it's a date input, but clicking the input will not open the date picker. You have to click on the calendar icon and I'm not sure if it's possible to provide your own.

Both Firefox and Safari open the picker when you focus on the field. This is convenient, but unexpected to users since it looks like a normal text input.

At this point, none of the browsers are really nailing it, so I'm going to keep this feature request open for the sake of offering a better UX. (It's quite an undertaking though, and definitely won't make it before 2.0 stable.)

[devmount]

Thank you Cory for this analysis and your hard work towards stable 2.0 👏🏻. I agree with you, no browser has the perfect solution here.

You have to click on the calendar icon and I'm not sure if it's possible to provide your own

Here an (untested!) idea of providing an own icon using the suffix slot:

<sl-input class="date" type="date">
  <sl-icon name="calendar" slot="suffix"></sl-icon>
</sl-input>

/* hide calendar icon on webkit browsers */
.date::-webkit-calendar-picker-indicator {
  display: none;
}

I'm not sure this works given that you actually need to call ::-webkit-calendar-picker-indicator on .date::part(input). But maybe this helps someone who needs an idea for supporting webkit browsers.

[mcjazzyfunky]

I personally love the idea of using vanilla js components that can be styled/customized in a way that they are looking 100% shoelaceish afterwards. If date pickers are using select boxes for months and/or years this may be a bit difficult or often not even possible perfectly. The other day I have seen this vanilla js date picker - I have not spent too much time in evaluating its possiblities, but it looks promising, I guess: https://raw.githack.com/mymth/vanillajs-datepicker/v1.1.4/demo/plain-css.html I know it does not have all the features requested above, but at least more features than I personally have ever needed in my work life :wink:

Size: 32 kB min / 10 kb min+gzip

[claviska]

I've been experimenting with <sl-calendar> as a date picker primitive in the calendar branch.

Preview: https://shoelace-7gqkj2lyo-shoelace.vercel.app/components/calendar

There's also activity in the Lit community to build a similar primitive based on Duet Date Picker, so that may be a candidate as well.

[kaiszybiak]

Hey @claviska 👋🏼 awesome to see progress here 🙂. We are looking forward to use the calendar / date picker component in our projects 🤩.

Do you have a roadmap in mind at which point these components will be included into the next / current branch?

While reading through the past issues and feature requests regarding this topic I noticed you initially had no interest in writing and maintaining a date/time picker from scratch. It seems like you changed your mind as the calendar branch looks like a custom implementation?

How do you plan to decide if shoelace makes use of the Duet Date Picker or calendar branch and what requirements still have to be fulfilled in order to be able to go forward with one option?

Our team would be grateful if you could give us some more insights. We plan to include a calendar / date picker component into our fork in the next weeks and would like to avoid duplicate and diverging work and potentially like to support here and accelerate the development process 🙂🙏🏼

[claviska]

The calendar branch is a proof of concept. I may evolve it further, but my current focus is on the new docs website, feature #413, and getting the design tokens stable to prep for the 2.0 release.

There's also some activity in the WC community to build a Lit-based calendar/date picker that libraries can import and reuse, so there could be some duplication of efforts happening that I'd like to avoid. More info here: https://github.com/AlaskaAirlines/auro-calendar/pull/8

All this means that a Shoelace date picker is unlikely to land before 2.0 stable.

How do you plan to decide if shoelace makes use of the Duet Date Picker or calendar branch and what requirements still have to be fulfilled in order to be able to go forward with one option?

Duet is Stencil-based, so it would be a fork. Given my work on the calendar branch, I'd probably just continue with that rather than forking and translating it. There's also a stalled PR #486 that was initially promising, but has many known issues in its current form.