Simple Date and Time Picker in Vanilla Javascript Plugin | simplepicker

How to make use of it:

Install and import the simplePicker into your challenge.

# NPM
$ npm install simplepicker --save

// ES 6
import SimplePicker from 'simplepicker';

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

Or immediately embrace the next JS and CSS information on the web page.

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

Create a new date picker and specify the goal container the date picker should append.

let myPicker = new SimplePicker(el);

Open/close the date picker.

myPicker.open()
myPicker.close()

Set the z-index property of the date picker.

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

Reset the date picker.

myPicker.reset(date)

Disable/enable the time selection.

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

// or
myPicker.disableTimeSection()
myPicker.enableTimeSection()

Event handlers are out there.

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

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

Material Inspired Date & Time Picker, Time Pickers In Pure JavaScript And CSS

See Demo And Download