search

skeletonlabs / skeleton

A complete design system and component solution, built on Tailwind.
https://skeleton.dev
MIT License
5k stars 317 forks source link

DatePicker and DateTimePicker #1452

Closed ab-smith closed 6 months ago

ab-smith commented 1 year ago

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 commented 1 year ago

Yes, we need it!!!

MLNW commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

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 commented 1 year ago

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:

Requirements:

endigo9740 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

entrenadorhispano commented 1 year ago

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 commented 11 months ago

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

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

SebasF1349 commented 11 months ago

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 commented 11 months ago

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 commented 6 months ago

Consolidating this under the v3 milestone issue for this request: