Upgrade the DatePicker component

[CuriousCI]

UX issues

I am having some UX related problems with the DatePicker component (so much so, that I had to build a custom DatePicker from calendar), and I think it would be really useful to make some updates to it:

1. Add an optional year-header: it would take too much to select a date far in the future with the current method.
   • It would be very cool if the year can be clicked and manually written (considering point 3.)
2. Add a minDate and a maxDate: in some cases, like a "booking service" I don't want the user to use the Chevrons to go before a certain date (for example, the minimum booking can be taken a week from today)
   • It would be useful to use minDate and maxDate to check manually written dates.
3. Make so that the manual date insertion can be disabled
4. It would be really nice if the user can insert only numbers inside the DatePicker (so there's no need for input checks)

Proposal

[illright]

Those are some nice ideas indeed, I agree with them for the most part. One question: why do you want to have a feature to disable the manual date insertion? That is, if I understand you correctly and that means "disable specifying the date with a text field".

As for the 4th point: huh. How did we leave it like that? :D

[CuriousCI]

why do you want to have a feature to disable the manual date insertion?

You're right 😅, there is no actual good reason to disable manual date insertion, it was just an idea I threw out there, but now that I think about it, it doesn't make much sense.

[aabounegm]

why do you want to have a feature to disable the manual date insertion?

The only reason I could think of is to avoid confusion. I have found websites that leave the date order up to my locale, and others that fix it to a specific format. For example, one website I found used dd/mm/yyyy when filling the form in Russian, but switched to mm/dd/yyyy when switching the interface to English, which led me to entering the wrong date. I agree that with proper website UX design it shouldn't be needed, but it can be useful in rare cases to decrease the probability of error with sensitive data. I just wonder what would happen when it is combined with noCalendar

Note that I'm not arguing for having the feature, just answering your question. I also don't see myself using it 😅

[illright]

Also, just to give you people an idea on where we stand: the developer experience of Attractions is suboptimal as of now. The reloads of Sapper take around 30 seconds, which is a pain to try and develop anything at all. So it's likely that if we are to work on this issue, it will be after #312 is merged.

In the meantime, you can either contribute to this issue or help us migrate to SvelteKit :)

[divStar]

Since this issue is open, I'd like to drop a comment about this UI framework working great with SvelteKit and Vite - especially from a devs POV. Build times seem quite good, hot reload works. I like it.

@topic: it'd be nice to have the option to display the contents of a date picker as wide or heigh as possible with several months visible at once.

[aeviou]

This UI framework is amazing and the Date Picker looks beautiful but agreed - it could use a year header, particularly for filling out historical dates such as DOB. No open source experience so not sure how the process works, but I can look into taking a crack at it if you think this kind of implementation looks good @illright

[illright]

I understand the use case, indeed it's pretty difficult to select the DoB from the picker as it stands. The original intention was to keep the picker for casual date picking (ideally not even switching months, and definitely not years), and if any precise date picking is required, the users would be able to just type out the date in the text field. This is also pretty accessible.

However, adding year selection would certainly be an improvement. I don't particularly like having a text field in place of the year as per the screenshot proposal above. I'd prefer to instead have the month and the year individual buttons that would replace the grid of days with the grid of months/years respectively. Something similar to what MUI X offers: https://mui.com/x/react-date-pickers/date-picker/

Alternatively, if you have other suggestions, feel free to propose them, or feel free to start implementing the one I outlined above. We'll guide you through your contribution process, so no worries there

[OfficialFreak]

One thing that would be nice is to prevent the user from entering dates that have been disabled.