JavaScript date time picker.
dist/
├── picker.css ( 4 KB)
├── picker.min.css ( 3 KB)
├── picker.js (41 KB)
└── picker.min.js (18 KB)
Three quick start options are available:
- Download the latest release.
- Clone the repository:
git clone https://github.com/fengyuanchen/pickerjs.git
. - Install with NPM:
npm install pickerjs
.
Include files:
<link href="/path/to/picker.css" rel="stylesheet">
<script src="/path/to/picker.js"></script>
Initialize with Picker
constructor:
- Browser:
window.Picker
- CommonJS:
const Picker = require('picker')
const picker = new Picker(element, options);
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)
.
- Type:
Element
orSelector
- Default:
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',
});
- Type:
Date
orString
- Default:
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',
});
- Type:
String
- Default:
'YYYY-MM-DD HH:mm'
- Tokens:
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
: Milliseconds
The 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: 'Jul 15, 2016',
format: 'MMM D, YYYY',
});
- Type:
Number
orObject
- Default:
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,
},
});
- Type:
Boolean
- Default:
false
Enable inline mode.
- Type:
String
(ISO language code) - Default:
''
Define the language.
- Type:
Array
- Default:
['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
Months' name.
- Type:
Array
- Default:
['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
Short months' name.
- Type:
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('');
},
});
- Type:
Number
- Default:
5
Define the number of rows for showing.
- Type:
Object
- Default:
{
title: 'Pick a date / time',
cancel: 'Cancel',
confirm: 'OK',
}
Define the title and button text of the picker.
- Type:
Function
- Default:
null
The shortcut of the show
event.
- Type:
Function
- Default:
null
The shortcut of the shown
event.
- Type:
Function
- Default:
null
The shortcut of the hide
event.
hidden
- Type:
Function
- Default:
null
The shortcut of the hidden
event.
- Type:
Function
- Default:
null
The shortcut of the pick
event.
If a method doesn't need to return any value, it will return the cropper instance (this
) for chain composition.
Show the picker.
Hide the picker.
- type:
- Type:
String
- Options:
'year'
,'month'
,'day'
,'hour'
,'minute'
,'second'
,'millisecond'
- Date time type.
- 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.
- Type:
- (return value):
- Type:
Date
orString
- Type:
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 (**标准时间)
picker.getDate(true);
// > 2048-10-24 05:12
- date:
- Type:
Date
- The new date.
- Type:
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
- Type:
- (return value):
- Type:
Date
- Type:
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 (**标准时间)
- date:
- Type:
Date
- Type:
- (return value):
- Type:
String
- The formatted date string.
- Type:
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.
hidden
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>
ortextarea
, 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="other-picker.js"></script>
<script src="picker.js"></script>
<script>
Picker.noConflict();
// Code that uses other `Picker` can follow here.
</script>
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Opera (latest)
- Edge (latest)
- Internet Explorer 9+
Maintained under the Semantic Versioning guidelines.