Allow to select date or range dates programatically with value attribute

[brunoprietog]

Hey there, thanks for the project!

We're integrating this element to have an accessible datepicker. However, we need to be able to have a date selected from the beginning.

The main use case is an edit form, where there's already a date previously selected and we want to allow to select another one. The selected date must be clearly marked, the start-date attribute isn't enough.

Another scenario is to support a change coming from the server, for example, making column filters in a table, filtering by date. In our case we use morphing for most of the inputs and it was easy to prevent the algorithm from touching the element so that it doesn't lose state. But still, ideally it should be resistant to changing the value attribute so that integration can be simpler.

I also thought about converting the private method updateValue to public, but I think that being able to define it from the HTML or JavaScript indistinctly is more consistent.

There's the possibility of using the public method parseDate, but it doesn't support ranges. If it's useful for that method to accept them too, I could do it in another PR.

Now you can initialize the element in the following 2 ways, with the selected date or with the selected date range:

<inclusive-dates id="datepicker" value="2024-01-01"></inclusive-dates>
<inclusive-dates id="range-datepicker" range="true" value="['2024-01-01', '2024-01-05']"></inclusive-dates>

It can also be seen in action on the demo page.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
inclusive-dates	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 6, 2024 6:38am