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 😉

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.

[rujorgensen]

I'd just like to add, that flatpickr converts to native on mobile, which is super nice IMO.

I vote +1 for something like that 👍. (I don't think flatpickr itself is still maintained though 🤔)

[woodcox]

Hi, I'm not sure if my comment should be a different discussion? Would a gov.uk / USA gov design system style date-input something that is worth building? This would be much easier to implement as validating the date could depend upon parse and isValid from date-fns.

[claviska]

I'd definitely be open to having both. In some cases, a calendar makes sense. In others, month/day/year make more sense. Thanks for the links!

[woodcox]

Great, How about something like the following as a starting point?

import {html, css, LitElement} from 'lit';
import {isValid, parse} from 'date-fns';

export class SLDateInput extends LitElement {
  static styles = css`
      :host {
        --_date-input-grid-cols: var(--date-input-grid-cols, 2.75em 2.75em 4em);
        --_date-input-gap: var(--date-input-gap, 0% 1em);
        --_date-input-margin: var(--date-input-margin, 0);
        --_date-input-padding: var(--date-input-padding, 0);
      }
      
      .date-input-group-wrapper {
          display: grid;
          grid-template-columns: var(--_date-input-grid-cols);
          gap: var(--_date-input-gap); 
       }
      
      fieldset {
        border: none;
        margin: var(--_date-input-margin);
        padding: var(--_date-input-padding);
      }
      
      legend {
        padding-inline-start: 0;
      }
      
      .date-input-group {
        display: flex;
        flex-direction: column;
      }
      
      input { 
        color: black;
        background: white;
        font-family: arial, sans-serif;
        position: relative;
      }      
  `;

  static properties = {
    dayInput: {type: String},
    monthInput: {type: String},
    yearInput: {type: String},
    monthFirst: {type: Boolean, reflect: true},
    disabled: {type: Boolean, reflect: true},
    required: {type: Boolean, reflect: true},
    dayPlaceholder: {type: String},
    monthPlaceholder: {type: String},
    yearPlaceholder: {type: String},
    title: {type: String},
    helpText: {type: String}
  };

  constructor() {
    super();
    this.result = '';
    this.dateValidation = '';
    this.dayPlaceholder = '';
    this.monthPlaceholder = '';
    this.yearPlaceholder = '';
    this.monthFirst = false;
    this.disabled = false;
    this.required = false;
    this.dayInput = '';
    this.monthInput = '';
    this.yearInput = '';
    this.title = 'What is your date of birth?';
    this.helpText = 'For example: 27 3 2007';
  }

  createDateString() {
    if (this.yearInput && this.monthInput && this.dayInput) {
      this.result = `${this.yearInput.toString().padStart(4, '0')}-${this.monthInput.toString().padStart(2, '0')}-${this.dayInput.toString().padStart(2, '0')}`;
    } else {
      this.result = '';
    }
  }

  validateDate() {
    if (this.yearInput && this.monthInput && this.dayInput) {
      let dateToValidate = `${this.yearInput.toString().padStart(4, '0')}/${this.monthInput.toString().padStart(2, '0')}/${this.dayInput.toString().padStart(2, '0')}`;
      dateToValidate = parse(dateToValidate, "yyyy/MM/dd", new Date()); // use parse to prevent js outputting 31/02/2023 as 03/03/2023
      this.dateValidation = isValid(new Date(dateToValidate));
    } else {
      this.dateValidation = false;
    }
  }

  dayTemplate() {
    return html`
        <div class="date-input-group">
        <label for="date-day">Day</label>
        <input
            @input=${(e) => {
                this.dayInput = e.target.value;
                this.createDateString();
                this.validateDate();
            }}
            id="date-day"
            placeholder=${this.dayPlaceholder}
            name="date-day"
            type="text"
            min="1"
            max="31"
            maxlength="2"
            pattern="[0-9]*"
            inputmode="numeric"
            aria-describedby="date-input-help-text"
            ?required=${this.required}
            ?disabled=${this.disabled}/>
        </div>
    `;
  }

  monthTemplate() {
    return html`
        <div class="date-input-group">
            <label for="date-month">Month</label>
            <input
                    @input=${(e) => {
                      this.monthInput = e.target.value;
                      this.createDateString();
                      this.validateDate();
                    }}
                    id="date-month"
                    placeholder=${this.monthPlaceholder}
                    name="date-month"
                    type="text"
                    min="1"
                    max="12"
                    maxlength="2"
                    pattern="[0-9]*"
                    inputmode="numeric"
                    aria-describedby="date-input-help-text"
                    ?required=${this.required}
                    ?disabled=${this.disabled}/>
          </div>
    `;
  }

  yearTemplate() {
    return html`
        <div class="date-input-group">
            <label for="date-year">Year</label>
            <input 
                    @input=${(e) => {
                      this.yearInput = e.target.value;
                      this.createDateString();
                      this.validateDate();
                    }}
                    id="date-year"
                    placeholder=${this.yearPlaceholder}
                    name="date-year"
                    type="text"
                    pattern="[0-9]*"
                    maxlength="4"
                    inputmode="numeric" 
                    aria-describedby="date-input-help-text"
                    ?required=${this.required}
                    ?disabled=${this.disabled}/>
          </div>
    `;
  }

  render() {
    if (this.monthFirst === true){
      return html
       `<fieldset>
          <legend>${this.title}</legend>
          <p id="date-input-help-text">${this.helpText}</p>
          <div class="date-input-group-wrapper">
            ${this.monthTemplate()}
            ${this.dayTemplate()}
            ${this.yearTemplate()}
          </div>
        </fieldset>
        <p>Date result: ${this.result}</p>
        <p>Validation: ${this.dateValidation}</p>
     `;
    } else {
      return html
       `<fieldset>
          <legend>${this.title}</legend>
          <p id="date-input-help-text">${this.helpText}</p>
          <div class="date-input-group-wrapper">
            ${this.dayTemplate()}
            ${this.monthTemplate()}
            ${this.yearTemplate()}
          </div>
        </fieldset>
        <p>Date result: ${this.result}</p>
        <p>Validation: ${this.dateValidation}</p>
     `;
    }
  }
}

customElements.define('sl-date-input', SLDateInput);

[claviska]

One challenge here is how we'll turn this into a form control. Under the hood, it's three, but we'll need to think about validation, getting/setting dates, and things like that.

The current approach to form controls in Shoelace involves a form controller that simulates what the [newish] ElementInternals API now provides. Safari most recently started supporting that, so we'll be transitioning from our own controller to ElementInternals soon. Admittedly, I've only played with it briefly, so I don't know enough about the API to understand if we can bake three inputs in it and have it act like one, but my assumption is it's likely possible.

That said, let's hold off until January. We have a big announcement to make then that will help everyone better understand our roadmap and what we're planning. 😄

[woodcox]

No worries about waiting. I hope your announcement means there's some consistent funding for you. I was googling the ElementInternals API and Lit and came across a form control mixin by open-wc that uses Lit as well. Hope this is useful for you.

[tamara-nexus]

Hello, not sure if this is the right place to comment but we came across the need for date, time, and combined date-time pickers to set form data or for data filtering.

It would be nice to have support for both date and time with the ability to specify which of the above options one wants for the case at hand. Range selection for both date and time when needed would be also nice to have. Specifying display format of date-time would be probably needed too.

We came across the issue others mentioned in previous comments here that the input type=date renders differently based on the browser e.g. Chrome has a better layout and shows options for time selection vs Firefox rendering does not look as nice and lacks the time selector.

[claviska]

Date picker was a Kickstarter stretch goal, so it's a bit lower on the priority list while we get Web Awesome shipped. We're hoping to have the Pro alpha out by December so we can start working on stretch goals (we have at least 14 free components and a number of pro components to build out as well!).

[tamara-nexus]

Thanks! Wow that sounds great! I have checked the stretch goals but here you mention 14 free components + other pro components to build. Anywhere we can see the list? It would help us to kind of know what is coming (and get more stakeholder on board) and perhaps avoid asking redundant questions. If I get the ok, we will start with the free version for PoCs and making sure the switch is smooth etc... but we are open for getting the pro version (we wil probably need those components too, we are already using Font Awesome pro and for us it is reliability and long term support that counts). We have tested the Shoelace version and so far I mostly got positive feedback. It is a bit tricky for us because we have a lot of different tech stacks and we am trying to set a base at least with the UI (components, look and feel, UX).

[claviska]

We promised to add a new free component for every $50,000 goal we met, so we have our work cut out for us. We're still planning out exactly what the free ones will be. Again, we're a small team so this does take a bit of time, but we're actively working on a plan to be more transparent about what's shipping and when. It's just a bit early to say with certainty, so I don't want to overpromise!

[tamara-nexus]

Yes, I totally understand. We look forward to more updates when they are available. Got over-excited :)

[tamara-nexus]

Hello, just wanted to say thank you for all your great efforts. I will be leaving my current position and the team will probably follow up the issues I have reported with you under this account using their own accounts. I will definitely keep Shoelace/Web Awesome in my mind for future projects, keep up the great work! What you are doing is Awesome.