Simple Date and Time Picker in Vanilla Javascript Plugin | simplepicker


simplepicker, mostly on the material, date, and time picker, but without relying on external dependencies like Moment, Rome, and Materialize.

date and time picker html, bootstrap datetimepicker, date time picker javascript, date and time picker jquery, jquery datetimepicker example, jquery datetimepicker format

How to make use of it:

Install and import the simplePicker into your challenge.

$ 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.

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 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

Official Website(priyank-p): Click Here

This superior jQuery/javascript plugin is developed by priyank-p. For extra Advanced usage, please go to the official website.