Top 10 JavaScript & CSS Date And Timer Picker Components Of 2018

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 and/or CSS 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 Dec 17 2018

Top 10 Date And Timer Picker Components:

1. Beautiful Material Design Date & Time Picker

Beautiful Material Design Date & Time Picker

Demo Download

A beautiful, Material Design styled datetime picker component which allows you select date and time from a modal popup. Based on Materialize CSS framework.


2. Flat Style JavaScript Date Picker – flatpickr

flatpickr

Demo Download

flatpickr is a super simple JavaScript library which enables the visitor to pick a date from a flat, clean, customizable calendar.


3. Lightweight Pure JavaScript Date Picker library – DatePickerX

DatePickerX

Demo Download

DatePickerX is a lightweight, native JavaScript based date picker which enables the visitor to select dates, months and years in a nice clean calendar view.


4. Pure JavaScript Date & Time Picker – MTR Datepicker

MTR Datepicker

Demo Download

A pure JavaScript date picker which enables the user to select a date & time by using up / down arrows or mouse wheel.


5. Lightweight Date Picker In Vanilla JavaScript

Lightweight Date Picker In Vanilla JavaScript

Demo Download

Vanilla datepicker is a lightweight vanilla JavaScript plugin used for creating a simple yet configurable date picker attaching to text input fields. No any 3rd libraries required.


6. Material Design Date Picker With Vanilla Javascript

Material Design Date Picker With Vanilla Javascript

Demo Download

A dependency-free vanilla Javascript library used to create a material design styled date picker for your web application.


7. Minimal Inline Calendar

Minimal Inline Calendar Date Picker In Vanilla JavaScript

Demo Download

A vanilla JavaScript library which enables the user to select a date from a minimal clean inline calendar view.


8. Highly Customizable Date and Time Picker with Rome.js

Highly Customizable Date and Time Picker with Rome.js

Demo Download

Rome.js is a simple to use JS library for appending a highly customizable date & time picker on your input field when clicked/focused on.


9. salsa-calendar

Simple Standalone JS Date Picker – salsa-calendar

Demo Download

salsa-calendar is a simple, standalone JavaScript library created to generate date (range) pickers for hotel booking applications.


10. Minimal Timer Picker With Pure JavaScript

Minimal Timer Picker With Pure JavaScript

Demo Download

A JavaScript/CSS only timer picker where you can select a time from a popup with separated hours/minutes selection panels.