[AskJS] Looking for a solid vanilla JS datepicker. Am I completely out of options?
I'm looking for a datepicker for a vanilla JS project, and somehow this seems much harder than it should be. No, input masks aren't enough. No, the native <input type="date"> isn't enough either. My checklist: Accessible Localized Flexible formatting options…
I'm looking for a datepicker for a vanilla JS project, and somehow this seems much harder than it should be. No, input masks aren't enough. No, the native <input type="date"> isn't enough either. My checklist: Accessible Localized Flexible formatting options Range picker support A decent set of events/hooks for integration What I've looked at so far: flatpickr: hasn't been updated in about 4 years vanilla-js-datepicker: hasn't been updated in about 3 years, and the range functionality is pretty weak Vanilla Calendar Pro: Russian-maintained, which is ruled out by our dependency policy Air Datepicker: same issue, and it also hasn't been updated in about a year Litepicker: dead Easepick: dead Most of the other options I've found are React-based, which is a non-starter for this project. Am I missing something, or are there really no good options left?
已收录讨论
It should be fine to use vanilla JS date pickers that hasn't been updated for a while. They are probably "feature complete". They don't run on the server so it will not cause security issues, they're also not dependent on a frontend library/framework like react, so they don't have to keep up with React updates.
The number of open pull requests on those libraries suggests otherwise.
I was looking at it just now. Update: this might be it.
That's a calendar not a date picker
My comment says it has a date picker option. Did you read either the comment or the repo doc before replying?
Sure thing! Let me ask Fable.
Working today and being safe to adopt for the future are not the same thing.
Please explain me why is this. In your experience.
https://github.com/williamtroup/Calendar.js has a date picker option
What do you think about Cally? I'm not involved with it and haven't personally used it, but it seems to check your boxes in general.
Im using Easepick in production in 5+ proyects without a single issue for about 3+ years... IDG the "IT MUST BE ALWAYS UPDATED" folks, or the "USE THE LAST VERSION OR DIE" people, if it works for your needs, it wont magically break tomorrow. More so if it is vanilla what you want.
This seems like the sort of thing AI would be great at building. Historically, I wouldn’t rebuild something like this from scratch, but you could probably get something decent from Claude in about an hour, so it makes sense now. Then you could build it exactly how you want (e.g., with a web component, with Tailwind if that’s your thing, etc.). You could even take an existing one you mostly like, fork it, and have AI build some enhancements.
The native one does most of what you're asking. It'll be localized, accessible... Not sure what "formatting options" mean , the date format you get will be based on the users' locale option. So if you're looking to change format for, say, French being 7 juliette 2026 vs July 7th 2026 , it'll sort of do the "right" thing if "right" means "how the user has their OS/browser configured" In terms of events for integration, there are native Dom events you can hook into to find when things are input, focused, etc. For range selection, I think this can be implemented with 2 pickers and link them via min/max attributes. If you're looking for something that booking software does where a couple clicks over a series of calendars specifies a date range, it might be tricky to implement. Not sure what your requirements are like. In general, any time I hear "custom html input element" run for the hills. It's incredibly difficult to get right, and 80% of what you need (even the complicated bits like accessibility, localization) is handled natively. If you're looking at 3rd party libraries, and worried about long-term maintainability.... Just use native 🤣
probably just ask AI which is the best for your use case here, or do a simple search online