Material Inspired Date & Time Picker – simplePicker

Category: Date & Time , Javascript | May 29, 2020
Author: priyank-p
Views Total: 1,837 views
Official Page: Go to website
Last Update: May 29, 2020
License: MIT


Material Inspired Date & Time Picker – simplePicker


simplePicker is a vanilla JavaScript plugin to create Material Design inspired date picker with time picker integrated.

How to use it:

Install and import the simplePicker into your project.

$ npm install simplepicker --save
// ES 6
import SimplePicker from 'simplepicker';

// CommonJS:
const SimplePicker = require('simplepicker');

Or directly include the following JS and CSS files on the page.

<link rel="stylesheet" href="dist/simplepicker.css">
<script src="dist/simplepicker.js"></script>

Create a new date picker and specify the target container the date picker should append to (Default: body).

let myPicker = new SimplePicker(el);

Open/close the date picker.

Set the z-index property of the date picker.

let myPicker = new SimplePicker(el,{
    zIndex: 10

Reset the date picker.


Disable/enable the time selection.

let myPicker = new SimplePicker(el,{
    disableTimeSection: false

// or

Event handlers available.

myPicker.on('submit', function(date, readableDate){
  // ...

myPicker.on('close', function(date){
  // ...


v2.0.2 (05/29/2020)

  • Update the time based on the reset date.
  • simplepicker: Allow user to pass a date to the reset method.


  • v2.0.1: Fixes a typo in one of the months: February. It also adds a new method reset to reset the date of simplepicker.


  • v2.0.0: fix simplepicker breaking in firefox


  • v1.2.4: avoid querying elements from other instance.

You Might Be Interested In:

6 thoughts on “Material Inspired Date & Time Picker – simplePicker

    1. elmanol

      I had this problem too. A fix I found is to add “e.stopImmediatePropagation();”
      at “click” event listener of the simplepicker.js file like so:

      e.addEventListener(“click”, function(e) {
      var t =,
      i = t.tagName.toLowerCase();

  1. Maryna

    Hello! I have an issue. I can’t find how to change a date format. The calendar gives this: yyyy/mm/dd and I need this one: dd/mm/yyyy. Thank you!


Leave a Reply