2.0.0

simplepicker

Simple datetime picker in vanilla javascript.
This project is mostly based on material-datetime-picker, but
without it relying on external dependencies like moment,
rome, and materialize.

Usage

To use simplepicker in your project you will need to include
CSS and JavaScript files in dist/ directory. CSS file dist/simplepicker.css
is used to style the simplepicker and the JavaScript file required is in dist/simplepicker.js.

If you use build tools, therefore require or ES6 import, you can also
require or import simplepicker; if you use typescript you'll need to do
import SimplePicker = require('simplepicker');.

If you include the js file in dist folder, SimplePicker is defined using
var declaration and is avalible as SimplePicker.

For typescript projects we provide the typescript declaration file
with the npm package.

API

This library is exported as a constructor, so you will need to create
and instance of the simplepicker.

new SimplePicker([el, opts]):

• el (optional, string, Element) - this parameter is optional
  but if no selector or element is passed it defaults to body.

• opts (optional, object) - possible options:

  • zIndex (number): sets the z-index for the simplepicker.
  • `` (boolean): If `true` disables the time picker section.
  • compactMode (boolean): If true the simplepicker will be more compact; the large
    display of the selected date, i.e. 25th will not be displayed.

The first argument passed could be opts.

This method creates new simplepicker instance, and inserts it into the dom.
It throws error only if the selector passed is not valid.

const simplepicker = new SimplePicker();

Note: You can have two SimplePicker instances but they both must have
two diffrent element passed in to bind to otherwise they both will trigger the same
event; this is beacuse they both will respond to event triggred by the same element.

// below both picker1 and picker2 are the same.
const picker1 = new SimplePicker();
const picker2 = new SimplePicker();

// but to have to diffrent picker on same page
// you will need to pass a diffrent selector as shown below.
const picker1 = new SimplePicker();
const picker2 = new SimplePicker('.some-element');

simplepicker.open()

This method opens the picker. The picker is hidden automatically
when the Cancel button or the overlay is clicked.

If it closed due to an user action the close event is triggred whereas
if the user selected an date the submit event it triggred. See on method
below to listen to these events.

simplepicker.close()

This method closes the picker without the user's action.
Make sure you are not ruining user experience unnecessarily.

simplepicker.on(event, handler):

• event (required, string): The name of the event, currently
  submit, and close are supported.
• handler (required, function): This handler is called then
  the event is triggred.

This function attaches a listener to simplepicker, which are called on sepecific events.
There could be multiple event listeners for a single event.

Events:

• submit: handler(date, readableDate) - Called
  when user selects the date. It is called with two arguments:
  date is first arguments that is a javascript date object, and
  the second parameter is readableDate a string with date in format
  1st October 2018 12:00 AM.
• close: handler() - It is called when due to user's action the
  picker was close. It happens when user clicks the cancel button
  or the picker overlay. Its handlers are called with no arguments.

simplepicker.disableTimeSection()

This method disables the time picker section.

simplepicker.enableTimeSection()

This method re-enables the time picker section if it was previously disabled.