Press "Enter" to skip to content

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. easyPicker is a vanilla JavaScript plugin to create Material Design impressed date picker with time picker built-in.

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.

 

Create a brand 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

Changelog:

v2.0.3 (08/28/2020)

  • Fixed a bug the place simplepicker would modify desk underneath its dad or mum factor.
  • Fixed points with the constructor not working as anticipated in some circumstances.
  • Fixed a problem with the place the date reported by the submit methodology differed from the one in UI. This bug was due to the reset methodology which can also be used when created a simplepicker occasion.

v2.0.2 (05/29/2020)

  • Update the time based mostly on the reset date.
  • simplepicker: Allow the person to move a date to the reset methodology.

02/08/2020

  • v2.0.1: Fixes a typo in one of many months: February. It additionally provides a brand new methodology reset to reset the date of simplepicker.

02/15/2019

  • v2.0.0: repair simplepicker breaking in firefox

01/05/2019

  • v1.2.4: keep away from querying components from the different occasions.

See Demo And Download

Official Website(priyank-p): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *