JavaScript date time picker.
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)
npm install pickerjs
Include files:
<link href="https://github.com/fengyuanchen/pickerjs/blob/master/path/to/picker.css" rel="stylesheet">
<script src="https://github.com/fengyuanchen/pickerjs/raw/master/path/to/picker.js"></script>
new Picker(element[, options])
element
HTMLElement
options (optional)
Object
<input type="text" id="input">
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)
.
If you want to change the global default options, You may use Picker.setDefaults(options)
.
Element
or Selector
null
Define the container for putting the picker. If not present, the picker will be appended to the document.body
.
new Picker(element, {
container: document.querySelector('.picker-container'),
});
Or
new Picker(element, {
container: '.picker-container',
});
Boolean
false
Indicate whether show the prev and next arrow controls on each column.
Date
or String
null
The initial date. If not present, use the current date.
new Picker(element, {
date: new Date(2048, 9, 24, 5, 12),
});
Or
new Picker(element, {
date: '2048-10-24 05:12',
});
String
'YYYY-MM-DD HH:mm'
YYYY
: 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
: MillisecondsThe date string format, also as the sorting order of date time columns.
new Picker(element, {
date: '2048-10-24 05:12:02.056',
format: 'YYYY-MM-DD HH:mm:ss.SSS',
});
Or
new Picker(element, {
date: 'Oct 24, 2048',
format: 'MMM D, YYYY',
});
Boolean
false
Indicate whether show the column headers. The text content of each header is defined in the text
option.
Number
or Object
1
Define the increment for each date time part.
new Picker(element, {
increment: 10,
});
Or
new Picker(element, {
increment: {
year: 1,
month: 1,
day: 1,
hour: 1,
minute: 10,
second: 10,
millisecond: 100,
},
});
Boolean
false
Enable inline mode.
String
(ISO language code)''
Define the language.
You should define the language first. Check out the i18n folder for more information.
Array
['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
Months' name.
Array
['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
Short months' name.
Number
5
Define the number of rows for showing.
Object
Default:
{
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.
Function
Default:
function (type, text) {
return text;
}
Translate date time text.
new Picker(element, {
translate(type, text) {
const aliases = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
return String(text).split('').map((n) => aliases[Number(n)]).join('');
},
});
Function
null
The shortcut of the show
event.
Function
null
The shortcut of the shown
event.
Function
null
The shortcut of the hide
event.
Function
null
The shortcut of the hidden
event.
Function
null
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.
String
'year'
, 'month'
, 'day'
, 'hour'
, 'minute'
, 'second'
, 'millisecond'
Pick the previous item.
prev
method)Pick the next item.
Pick the current date to the target element.
Boolean
Date
or String
Get the current date.
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
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.
String
Date
Parse a date string with the set date format.
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
String
Format a date object to a string with the set date format.
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
<input>
or<textarea>
element, then achange
event will be triggered too.
If you have to use other picker with the same namespace, just call the Picker.noConflict
static method to revert to it.
<script src="https://github.com/fengyuanchen/pickerjs/raw/master/other-picker.js"></script>
<script src="https://github.com/fengyuanchen/pickerjs/raw/master/picker.js"></script>
<script>
Picker.noConflict();
// Code that uses other `Picker` can follow here.
</script>
Maintained under the Semantic Versioning guidelines.