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.
Installation
Install from npm:
npm install simplepicker
We also started to publish this package (starting from v2.0.0) to GitHub's package registry. If you prefer the installing it from there you will need to follow GitHub's instructions.
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 tobody. -
opts(optional,object) - possible options:zIndex(number): sets thez-indexfor the simplepicker.disableTimeSection(boolean): Iftruedisables the time picker section.compactMode(boolean): Iftruethe simplepicker will be more compact; the large display of the selected date, i.e. 25th will not be displayed.selectedDate(Date): initialize the simplepicker with this date, if not used then today will be used
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.reset(date):
date(optional,Date) - The date to select after reset. Default is current date (as innew Date()).
Note: This method will overrride what the user may have already selected. Therefore, use it with care considering user experience.
The example below sets resets to a date before showing the picker.
const sp = new SimplePicker();
sp.reset(new Date(2019, 12, 31, 7, 0, 0));
sp.open();
simplepicker.on(event, handler):
event(required,string): The name of the event, currentlysubmit, andcloseare 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:dateis first arguments that is a javascript date object, and the second parameter isreadableDatea string with date in format1st 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.
27 Jun 27, 2022
22 Dec 6, 2022
1 May 31, 2022
391 Dec 29, 2022
305 Nov 23, 2022
10 Aug 3, 2022
13 Oct 23, 2022
51 Dec 22, 2022
8 Oct 11, 2022
41 Dec 16, 2022
13 Jan 4, 2023
10 Aug 26, 2022
207 Dec 14, 2022
7 Oct 23, 2022
15 Nov 14, 2022
3.9k Dec 27, 2022
80 Dec 27, 2022
7 Jul 19, 2022
393 Jan 6, 2023