JavaScript date time picker.
npm install pickerjs   
> JavaScript date time picker.
- Website
- Main
- Getting started
- Options
- Methods
- Events
- No conflict
- Browser support
- Versioning
- License
``text`
dist/
├── picker.css
├── picker.min.css (compressed)
├── picker.js (UMD)
├── picker.min.js (UMD, compressed)
├── picker.common.js (CommonJS, default)
└── picker.esm.js (ES Module)
`shell`
npm install pickerjs
Include files:
`html`
#### Syntax
`js`
new Picker(element[, options])
- element
- Type: HTMLElement
- The target element for picking.
- options (optional)
- Type: Object
- The options for picking. Check out the available options.
#### Example
`html`
`js`
var input = document.getElementById('input');
var picker = new Picker(input, {
format: 'YYYY/MM/DD HH:mm',
});
You may set picker options with new Picker(element, options).Picker.setDefaults(options)
If you want to change the global default options, You may use .
- Type: Element or Selector
- Default:
Define the container for putting the picker. If not present, the picker will be appended to the document.body.
`js`
new Picker(element, {
container: document.querySelector('.picker-container'),
});
Or
`js`
new Picker(element, {
container: '.picker-container',
});
- Type: Boolean
- Default:
Indicate whether show the prev and next arrow controls on each column.
- Type: Date or String
- Default:
The initial date. If not present, use the current date.
`js`
new Picker(element, {
date: new Date(2048, 9, 24, 5, 12),
});
Or
`js`
new Picker(element, {
date: '2048-10-24 05:12',
});
- Type: String
- Default:
- Tokens:
- : 4 digits year with leading zeroYYY
- : 3 digits year with leading zeroYY
- : 2 digits year with leading zero and be converted to a year near 2000Y
- : Years with any number of digits and signMMMM
- : Month nameMMM
- : Short month nameMM
- : Month number with leading zeroM
- : Month numberDD
- : Day of month with leading zeroD
- : Day of monthHH
- : Hours with leading zeroH
- : Hoursmm
- : Minutes with leading zerom
- : Minutesss
- : Seconds with leading zeros
- : SecondsSSS
- : Milliseconds with leading zeroSS
- : Milliseconds with leading zeroS
- : Milliseconds
The date string format, also as the sorting order of date time columns.
`js`
new Picker(element, {
date: '2048-10-24 05:12:02.056',
format: 'YYYY-MM-DD HH:mm:ss.SSS',
});
Or
`js`
new Picker(element, {
date: 'Oct 24, 2048',
format: 'MMM D, YYYY',
});
- Type: Boolean
- Default:
Indicate whether show the column headers. The text content of each header is defined in the text option.
- Type: Number or Object
- Default:
Define the increment for each date time part.
`js`
new Picker(element, {
increment: 10,
});
Or
`js`
new Picker(element, {
increment: {
year: 1,
month: 1,
day: 1,
hour: 1,
minute: 10,
second: 10,
millisecond: 100,
},
});
- Type: Boolean
- Default:
Enable inline mode.
- Type: String (ISO language code)''
- Default:
Define the language.
> You should define the language first. Check out the i18n folder for more information.
- Type: Array
- Default:
Months' name.
- Type: Array
- Default:
Short months' name.
- Type: Number
- Default:
Define the number of rows for showing.
- Type: Object
- Default:
`js`
{
title: 'Pick a date and time',
cancel: 'Cancel',
confirm: 'OK',
year: 'Year',
month: 'Month',
day: 'Day',
hour: 'Hour',
minute: 'Minute',
second: 'Second',
millisecond: 'Millisecond',
}
Define the title and button text of the picker.
- Type: Function
- Default:
`js`
function (type, text) {
return text;
}
Translate date time text.
`js
new Picker(element, {
translate(type, text) {
const aliases = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
return String(text).split('').map((n) => aliases[Number(n)]).join('');
},
});
`
- Type: Function
- Default:
The shortcut of the show event.
- Type: Function
- Default:
The shortcut of the shown event.
- Type: Function
- Default:
The shortcut of the hide event.
- Type: Function
- Default:
The shortcut of the hidden event.
- Type: Function
- Default:
The shortcut of the pick event.
If a method doesn't need to return any value, it will return the picker instance (this) for chain composition.
Show the picker.
Hide the picker.
- type:
- Type: String
- Options: , 'month', 'day', 'hour', 'minute', 'second', 'millisecond'
- Date time type.
Pick the previous item.
- type: (the same as the prev method)
Pick the next item.
Pick the current date to the target element.
- formatted (optional):
- Type: Boolean
- Format the date.
- (return value):
- Type: or String
Get the current date.
`js
const picker = new Picker(element, {
date: new Date(2048, 9, 24, 5, 12),
});
picker.getDate();
// > Sat Oct 24 2048 05:12:00 GMT+0800 (China Standard Time)
picker.getDate(true);
// > 2048-10-24 05:12
`
- date:
- Type: Date
- The new date.
Override the current date with a new date.
Update the picker with the current the element value / text.
Reset the picker and the element value / text.
- date:
- Type: String
- (return value):
- Type:
Parse a date string with the set date format.
`js
const picker = new Picker(element, options);
picker.parseDate('2048-10-24 05:12');
// > Sat Oct 24 2048 05:12:00 GMT+0800 (China Standard Time)
`
- date:
- Type: Date
- (return value):
- Type:
- The formatted date string.
Format a date object to a string with the set date format.
`js
const picker = new Picker(element, options);
picker.formatDate(new Date(2048, 9, 24, 5, 12));
// > 2048-10-24 05:12
`
Destroy the picker and remove the instance from the target element.
This event fires when a picker modal starts to show.
> Only available in non-inline mode.
This event fires when a picker modal has shown.
> Only available in non-inline mode.
This event fires when a picker modal starts to hide.
> Only available in non-inline mode.
This event fires when a picker modal has hidden.
> Only available in non-inline mode.
This event fires when pick the current date to the target element.
> If the target element is an or