Flexible JavaScript Library for Date & Time Selection – Date Picker

Category: Date & Time , Javascript , Recommended | January 8, 2024
Views Total:947 views
Official Page:Go to website
Last Update:January 8, 2024


Flexible JavaScript Library for Date & Time Selection – Date Picker


A multilingual, customizable, themable JavaScript date picker library designed to simplify selecting dates, times, or both on web applications.

It provides a clean UI for selecting dates and/or times through the familiar calendar interface. Users can navigate through months to reach the desired date. Perfect for forms where users need to input deadlines, appointments, or any date-related information.

How to use it:

1. Install & download.

# Yarn
$ yarn add @cevad-tokatli/date-picker
$ npm install @cevad-tokatli/date-picker
// ES module
import DatePicker from '@cevad-tokatli/date-picker';
// Browser
<link rel="stylesheet" href="css/date-picker.css" />
<script src="js/date-picker.min.js"></script>

2. Create an empty DIV for the date picker UI.

<div id="myPicker"></div>

3. Create an input field to accept the selected date/time.

<input id="picker-input">

4. Create a trigger element to launch the date picker calendar.

<button id="picker-toggle">Trigger</button>

5. Initialize the date picker.

const myPicker = new DatePicker({
      el: '#myPicker',
      toggleEl: '#picker-toggle',
      inputEl: '#picker-input'

6. Set the type of the date picker:

  • DATE: Date picker
  • HOUR: Time picker
  • DATEHOUR: Datetime picker
const myPicker = new DatePicker({
      el: '#myPicker',
      toggleEl: '#picker-toggle',
      inputEl: '#picker-input',
      type: 'DATEHOUR'

7. Set the date/time formats:

const myPicker = new DatePicker({
      el: '#myPicker',
      toggleEl: '#picker-toggle',
      inputEl: '#picker-input',
      dateType: 'MM/DD/YYYY',
      hourType: '24', // '12' or '24'

8. Localize the date picker.

DatePicker.createLanguage('en', {
  DAYS_ABBR: ['', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  MONTHS: ['', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  MONTHS_ABBR: ['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  AM_PM: ['AM', 'PM'],
  INVALID_DATE: 'Invalid Date'
const myPicker = new DatePicker({
      el: '#myPicker',
      toggleEl: '#picker-toggle',
      inputEl: '#picker-input',
      lang: 'en'

9. More configuration options.

const myPicker = new DatePicker({
      // initial value
      value: null,
      // allow null and empty value
      allowEmpty: true,
      // show buttons
      showButtons: false,
      // open the date picker when the input is clicked
      inputToggle: false,
      // reverse increase/decrease orientation
      orientation: false,
      // show increase/decrase buttons instead of arrows
      showArrowButtons: false,

10. API methods.


11. Events.

myPicker.el.addEventListener('wdp.open', () => {
  // do something
myPicker.el.addEventListener('wdp.close', () => {
  // do something
myPicker.el.addEventListener('wdp.change', () => {
  // do something
myPicker.el.addEventListener('wdp.save', () => {
  // do something
myPicker.el.addEventListener('wdp.cancel', () => {
  // do something
myPicker.el.addEventListener('wdp.destroy', () => {
  // do something

12. Change the theme of the date picker by add the following CSS classes to the main container.

<div id="blue-picker" class="wdp-blue"></div>
<div id="cyan-picker" class="wdp-cyan"></div>
<div id="dark-picker" class="wdp-dark"></div>
<div id="gray-picker" class="wdp-gray"></div>
<div id="green-picker" class="wdp-green"></div>
<div id="light-picker" class="wdp-light"></div>
<div id="purple-picker" class="wdp-purple"></div>
<div id="red-picker" class="wdp-red"></div>
<div id="yellow-picker" class="wdp-yellow"></div>

You Might Be Interested In:

Leave a Reply