Releases: priyank-p/simplepicker
v2.0.4
v2.0.3
v2.0.3
This release contains 3 bug fixes: #21, #23, #25:
- Fixed a bug where simplepicker would modify table under it's parent element.
- Fixed issues with the constructor not working as expected in some cases.
- Fixed a issue with where the date reported by the
submit
method differed from the one in UI. This bug
was because of thereset
method which is also used when created asimplepicker
instance.
Commit changelog
git log --pretty="- %h: %s" v2.0.2...v2.0.3
- e55e558: release: New release v2.0.3.
- 1302765: simplepicker: Fix an issue with the reset method affecting time.
- 6ad2ed8: simplepicker: Don't modify elements outside the simplepicker elements.
- 43e9cd3: simplepicker: Don't set this.$simplepicker to wrong el.
- 8cde1bf: simplepicker: Fix logic of the constructor.
- 131c215: build(deps): bump elliptic from 6.4.1 to 6.5.3
- 5b17860: dependencies: Update lodash to 4.17.19.
- 3535ebd: dependencies: Upgrade websocket-extensions from 0.1.3 to 0.1.4.
- ffde497: simplepicker: Fix an issue with multiple instances of simplepicker.
- e27aa11: Add index-multi demo page.
v2.0.2
v2.0.2
This release contains a new feature: the reset method. It also contains a minor bugfix #12.
We also had a new contributor @crossleyjuan who implemented the reset
method feature.
Changelog
git log --format='- %h: %s' v2.0.1...v2.0.2
:
v2.0.1
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 tobody
. -
opts
(optional,object
) - possible options:zIndex
(number
): sets thez-index
for the simplepicker.- `` (
boolean
): If `true` disables the time picker section. compactMode
(boolean
): Iftrue
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
, andclose
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 isreadableDate
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.
v2.0.0
v1.2.4 Bug fix release
v1.2.4
This version fixes an issue where if there are two instances of simplepicker
, opening one of them would make the calendar section blank. (#5)
v1.2.3
v1.2.2
Changes
This release contains bug fixes:
- Fixed issue where readable date was not updated.
- Made the size of picker
310px
, on some browsers the calender was cut-off from the right side which fixes this issue.
Commits
git log v1.2.1...v1.2.2 --reverse --oneline --format=' * %h: %s'
: