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.
8. Lightweight Accessible Date Picker Component – WC Datepicker
A lightweight, accessible, customizable, multilingual, and framework-agnostic date picker & date range picker component written in pure JavaScript (TypeScript).
Features:
- Small footprint: About 8 KB minified and gzipped.
- Dependency-free: No external dependencies.
- Framework-agnostic: Standard Web Component that works with any framework.
- Strongly typed: Written in TypeScript.
- Accessible: Built to support users of assistive technology.
- Localizable: Customizable labels and date formats.
- Customizable: Semantic markup with no built-in styles.
- Range selection: Allows to select single dates or ranges.
9. Accessible Customizable Date/Time/Date Picker for Modern Web App – FDatepicker
fdatepicker is a lightweight Vanilla JS date/time/date range picker that creates feature-rich date selection interfaces without framework dependencies like jQuery.
You can get it running in seconds using simple HTML data- attributes directly in your markup, or you can use its straightforward JavaScript API for more complex configurations.
Features:
- Flexible Date Selection: Supports single date, multiple dates, and date range picking.
- Time Picker: Includes a fully configurable time selector with 12-hour or 24-hour formats.
- Customization & Theming: Provides clean CSS classes for easy styling to match your application’s look and feel.
- Localization: Comes with built-in support for over 25 languages and allows for custom language configurations.
- Accessibility: Full keyboard navigation support is included out of the box.
10. Developer-friendly Date Picker In Pure JavaScript – thedatepicker
A simple, customizable, developer-friendly date picker plugin implemented in pure (vanilla) JavaScript.
Features:
- Pure javascript, no dependencies
- Responsive (fullscreen on mobile devices)
- Appropriate semantics – rendered into
<table> - Accessible – Can be fully handled by keyboard only; only and only clickable elemets are always
<a>; includes ARIA labels - Listeners for any event (
open/close/(de)select/monthChange/focus) - Customizable design – all logical elements has it’s predefined CSS classes; simply stylize weekend days, current day, past days, etc.
- Possible to place it to a custom
<div>or just let it float under an<input> - Darkmode
More Resources:
To find more about date & time pickers for your modern web applications, here are a few more resources available on our networks: