Material Inspired Date & Time Picker – simplePicker

Category: Date & Time , Javascript | February 15, 2019
Author: priyank-p
Views Total: 2,361
Official Page: Go to website
Last Update: February 15, 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:

02/15/2019

  • v2.0.0: fix simplepicker breaking in firefox

01/05/2019

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

You Might Be Interested In:


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

  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!

    Reply

Leave a Reply