The date and time picker is a useful and commonly used component in modern web design.
Here’s a constantly updated list of the 10 best JavaScript-based Date and Time Picker components we published on CSSScript.com.
With these components, your users are able to quickly and simply select dates and times for a specific input field.
I hope you like it and don’t forget to spread the world.
Originally Published Nov 23 2017, updated Jan 08, 2026
10 Best Date And Timer Picker Components:
1. Powerful Multilingual Date/Time Picker – Tempus Dominus
A powerful, fully customizable and lightweight date/time picker for Vanilla JavaScript and jQuery. It is a zero dependency replacement for the native HTML5 date & time input type.
Features:
- Multiple languages.
- Automatic language detection.
- 5 view modes: ‘clock’ | ‘calendar’ | ‘months’ | ‘years’ | ‘decades’.
- Allows to enable/disable dates.
- Allows date range selection.
- Allows to disable/enable dates & times.
- Allows to disabled days of the week.
- Allows to select multiple dates.
- Smart positioning.
- Removed jQuery and Moment.js dependencies.
2. Mobile-first iOS-style Date Picker In Vanilla JavaScript – rolldate
A mobile-first, iOS-style, multi-format date picker component that uses better-scroll library for smooth scroll experience on the mobile & desktop.
3. User-friendly Datetime Range Picker With Predefined Date Ranges
This is the vanilla JS version of the jQuery Date Range Picker plugin, which allows you to create a customizable, nice-looking date range picker with pre-defined date ranges.
4. Vanilla JavaScript Date & Date Range Picker For The Web
A flexible, powerful, accessible, multi-language, framework-agnostic date & date range picker for modern web design. Inspired by bootstrap-datepicker, and it works with most popular front-end frameworks such as Bootstrap, Bulma, Foundation, etc.
Features:
- 3 modes: inline, date picker, date range picker
- i18n.
- Keyboard navigation.
- Days/months/years/decades views.
- Allows to pick multiple dates.
- Allows to disable/highlight specific days.
- Custom date format.
5. Feature-rich Calendar & Date Picker Components – Cally
Cally provides a set of responsive, customizable, accessible, feature-rich calendar web components for web applications, with a minimal bundle size of 8.5KB min/gzip. These components support single dates, date ranges, and multi-month displays while maintaining complete accessibility and localization support.
Features:
- Single date selection and date ranges
- Multiple month displays
- RTL text direction
- Screen reader compatibility
- Keyboard navigation
- Custom theming through CSS parts
- Full localization via Intl.DateTimeFormat
6. Lightweight Accessible Datepicker Calendar Component – DateDreamer
An easy, lightweight, and accessible date picker & calendar component written in Vanilla JavaScript.
Features:
- Minimal clean themes.
- Dark mode.
- Custom date format.
- Shadow DOM.
- Custom styles.
- And more.
7. Elegant Accessible Date Range Picker In JavaScript – Hotel Datepicker
A simple, flexible, customizable, accessible, and multilingual date range picker written in pure JavaScript. Can be used on hotel websites to provide an intuitive interface for users to select their check-in and check-out dates.