Shoelace: 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