DatePicker and DateTimePicker

[ab-smith]

Describe what feature you'd like. Pseudo-code, mockups, or screenshots of similar solutions are encouraged!

Hello,
This will be a great addition given how complex this can be. Options to consider: with and without time, single value or range.
Thank you

What type of pull request would this be?

None

Any links to similar examples or other references we should review?

Some inspiration:
https://svelte-datepicker.vercel.app/

[thruthesky]

Yes, we need it!!!

[MLNW]

A date (range) picker would be a great, but complex addition. I'd love to have one but I fear it may quickly go in the direction of data tables in terms of scope and complexity.

If we would implement something like this, I think we would need to integrate with a date library like Luxon or dayjs. Not sure what your stance on that would be @endigo9740?

[endigo9740]

Yep exactly @MLNW - I ask folks to temper their expectations on on this one. A good solid date picker is high up on my personal list of things I'd love to build, but also near the top for most difficult elements to build and maintain. Until something like the Temporal API drops, building this pure native would be nightmare, so a third party dependency will be likely. I was personally leaning towards:

https://date-fns.org/

The problem we're facing now is we want to keep the Skeleton core lean and with as few dependencies as possible. This is part of why one of our major roadmap tasks it to start modularizing the library, or at least pulling out the features that rely on third party dependencies (ex: code blocks and popups). These could then act as standalone libraries that could be used with or without Skeleton. Maybe even without Tailwind.

However, the prerequisites for this are a VERY heavy lift. We're investigating a monorepo structure to keep the dev process lean and fast.

TL;DR: Long story short, this is on my mind, we're building towards the ability to build and maintain these types of features, but your patience is welcome in the meantime.

[SebasF1349]

Meanwhile, I can personally recommend flatpickr as a lightweight, very complete and nice looking Date/Time Picker. There are many examples in the website and can be easily stylized with some themes or css.

[MLNW]

Meanwhile, I can personally recommend flatpickr as a lightweight, very complete and nice looking Date/Time Picker. There are many examples in the website and can be easily stylized with some themes or css.

I've used it based on your recommendation and have to say I like it a lot. I had a little trouble to get it integrated with the Skeleton styles but in the end it wasn't too hard (see this thread on discord for more information). Though I yet have tried to style the picker itself, only the input field that it comes with.

[devtrix]

A Datepicker alone will be helpful. One can use this to create a Date range component. The issue with Flatpicker is it only allows for Mousedown/keydown for a calendar vs the HTML5 datepicker which allowed for masked input and a choice of calendar popup. This makes it mobile friendly. In most enterprise apps you need a datepicker component that is also mobile friendly and I wish this would be available.

[endigo9740]

Given we've had a couple more posts here, I wanted to again reference my message above:

• DatePicker and DateTimePicker #1452 (comment)

However, a quick update, we've made great progress on those "heavy lift" items I mentioned above. Skeleton is now part of monorepo project structure. The next major step will be introducing additional standalone packages for current features such as popups and code blocks. Once we have the process worked out for that, we can then circle back to new features such as date/time selection.

Again, no ETA, but we know folks want this, and we do as well. But one foot in front of the other here. It'll take time to get there. So I appreciate folks patience in the meantime.

[entrenadorhispano]

Hi everyone, I've started working on a date picker for a personal project.

I'm here to ask about the quality requirements to deploy it into the skeleton UI.

Idea:

• It will not use any dependencies, just plain TypeScript and the Date API. I know it will be challenging, but I currently have the time and energy to tackle it.

• For now, it will be kept simple, with just a single date picker and no ranges or additional features.

• For now, It will have a fixed layout of a 7-row by 6-column grid, similar to the Windows 11 calendar.

Requirements:

• I need to know the minimum standards and constraints it should meet to be merged into the skeleton UI.
• Are there any other concerns regarding the component?
• I need approval to proceed with this featurem, then I may complete it within 30 days.

[endigo9740]

Hey @entrenadorhispano that sounds awesome! This is one of those grand features I've wanted since I started the project, but just seem to get time to devote to it.

Per your notes:

It will not use any dependencies

We would definitely have a requirement of no dependencies if it was to be included within Skeleton's core package. Features that require dependencies can still be used, but they will live outside the core. That way we're not forcing dependencies on folks that don't need that feature.

For now, it will be kept simple, with just a single date picker and no ranges or additional features.

That's likely a great idea. Just remember to plan ahead - we only allow breaking changes for major releases. However, we do indicate features that are in a "beta" state to allow early adoption, but prevent users that are leery of breakage.

just plain TypeScript and the Date API. I know it will be challenging, but I currently have the time and energy to tackle it.

Myself and the team love Typescript, everything in Skeleton is written with Typescript. But just a tip here - make sure it's not required to consume the picker. There's a portion of the audience that don't use Typescript, so a hard requirement for it would alienate some.

I need to know the minimum standards and constraints it should meet to be merged into the skeleton UI.

The majority of contribution requirements are documented here:
https://www.skeleton.dev/docs/contributing

Of course you have all our source to reference as well - and the team and I are on Discord every day if you have follow up questions.

Are there any other concerns regarding the component?

A personal pet peeve of mine when it comes to Pickers is when it's date only. I've worked professionally doing this stuff for over a decade and almost every project had a requirement of picking both dates AND times at once. Even if they are broke into two components, they need to be available to work in conjunction. Just a consideration - not a hard requirement.

Also keep in mind this is one of the hardest things to build and build right. Dates/time/timezones/etc are complicated. I wouldn't fault anyone if they made it part way through and gave up. It's at tough feature to crack.

I need approval to proceed with this feature, then I may complete it within 30 days.

The first requirement is reaching out and asking the questions you are and just confirming it's not duplicating effort. I can confirm no one else is working on this, so you're good on our side. Just make sure to read the contribution guidelines above and keep in touch. We're around to help!

I do request that folks send draft PR early into the process as a way to "stake claim" and to inform others this is being worked on. It also allows for better peer review. No one here expects perfection, but there's a lot of talent to jump in and help if you hit a wall or need some guidance.

[Sarenor]

If possible, I'd like to add my own personal pet peeve, although it might make it infinitely more complicated: Typing.
I hate date pickers where I have to use the interface and don't have the option of typing out the date if I know it exactly.

If date parsing turns out to be a horribly convoluted effort, feel free to skip my pet peeves though!

[entrenadorhispano]

Thank you for your response.

Alright! I'm starting the process today. 🚀

Yes, a date-time picker is a much more reasonable option to build at once.

I will read the guidelines, do the basic research, and build the draft in the upcoming days. 👌

[txtyash]

There's this date picker for svelte: https://github.com/SharifClick/svelte-touch-datepicker

[entrenadorhispano]

Thanks, I will check it out now.

Im pending on this feature, last month just refactor all my app to Skeleton.
(I've underestimated time for this task, excuse me for the timeline mentioned before)

[codercatdev]

Whey don't we just style the standard datetime-local?

https://codepen.io/codercatdev/pen/MWQbpaQ

[SebasF1349]

Skeleton tries to use native elements when possible, but in this case the date inputs available are not easy to style. As for your suggestion, I can only see the property accent-color being used, but that doesn't change anything in my browsers (Vivaldi, Chrome and Firefox). MDN even mentions accent-color is not applied to date input: https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color

[endigo9740]

Gosh I wish we could! I'd opt for that in a heartbeat. But yeah cross browser support just is really lacking. Last I checked Safari doesn't even render anything special - it just looks like a plain text input!

[endigo9740]

Consolidating this under the v3 milestone issue for this request:

• NEXT: Date Picker and Date Handling #2530