Material Inspired Date & Time Picker – simplePicker

Category: Date & Time , Javascript | January 5, 2019
Author: priyank-p
Views Total: 1,274
Official Page: Go to website
Last Update: January 5, 2019
License: MIT

Preview:

Material Inspired Date & Time Picker – simplePicker

Description:

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

myPicker.open()
myPicker.close()

Set the z-index property of the date picker.

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

Disable/enable the time selection.

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

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

Event handlers available.

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

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

Changelog:

01/05/2019

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

You Might Be Interested In:

Leave a Reply