Really simple, powerful and customizable datepicker.
Author - Nazar Mokrynskyi
Based on DatePicker by Stefan Petre
Browser support:
- IE 10+
- Opera 12.1+
- Latest versions of Firefox and Chrome
You need only 2 files: js/jquery.pickmeup.min.js
and css/pickmeup.min.css
.
Then you can apply datepicker to any element:
$('.date').pickmeup();
Global default settings are stored in $.pickmeup
They can be redefined during initialization:
$('.date').pickmeup({
format : 'Y-m-d'
});
or with data-attributes with pmu-
prefix:
<div class="date" data-pmu-format="Y-m-d"></div>
For Twitter Bootstrap integration you do not need to include style file, but you need to include jquery.pickmeup.twitter-bootstrap.js
instead,
that will read settings of current Bootstrap theme and apply them to PickMeUp, so that it will look similar to native Bootstrap elements.
To apply integrated version, replace pickmeup
with pickmeup_twitter_bootstrap
in initialization:
$('.date').pickmeup_twitter_bootstrap();
All options and events are the same.
For UIkit integration you do not need to include style file, but you need to include jquery.pickmeup.uikit.js
instead,
that will read settings of current UIkit theme and apply them to PickMeUp, so that it will look similar to native UIkit elements.
To apply integrated version, replace pickmeup
with pickmeup_uikit
in initialization:
$('.date').pickmeup_uikit();
All options and events are the same.
Option | Value | Default | Description |
---|---|---|---|
date | array/object/string | new Date | Selected date after initialization. Can be single date string/object or array depending on selection mode |
default_date | array/object/string | new Date | Allows to keep empty value until date selected, but open PickMeUp at this default date |
flat | boolean | false | Whatever if the date picker is appended to the element or triggered by an event |
first_day | 0/1 | 1 | First day of week: 0 - Sunday, 1 - Monday |
prev | string | โ | Previous button content |
next | string | โถ | Next button content |
mode | single/multiple/range | single | Date selection mode |
select_day | boolean | true | Allow or deny days selection |
select_month | boolean | true | Allow or deny months selection |
select_year | boolean | true | Allow or deny year selection |
view | days/months/years | days | View mode after initialization |
calendars | int | 1 | Number of calendars, that will be rendered |
format | string | d-m-Y | Date format (aAbBCdeHIjklmMpPsSuwyY are supported) |
position | top/right/bottom/left | bottom | Date picker's position relative to the triggered element |
trigger_event | string | click touchstart | Event to trigger the date picker |
class_name | string | Class to be added to root datepicker element | |
hide_on_select | boolean | false | If true - datepicker will be hidden after selection (for range mode allows to select first and last days) |
min | null/object/string | null | Min date available for selection, null means no limitation |
max | null/object/string | null | Max date available for selection, null means no limitation |
separator | string | - |
Is used for joining separate dates in multiple mode and first/last dates in range mode |
locale | object | Object, that contains localized days of week names and months |
this
in any callback will be the same element, on which pickmeup() was called.
Events are specified as regular options:
Triggered on day element rendering, accepts date as argument and may return object with next properties:
selected
: iftrue
- date will be selecteddisabled
: iftrue
- date will be disabledclass_name
: will be added to class of day element
Triggered at date change, accepts formatted date as argument
Triggered before showing
Triggered at showing, if not true
returned - datepicker will not be shown
Triggered at hiding, if not true
returned - datepicker will not be hidden
Triggered after filling of PickMeUp container with new markup of days, months, years. May be needed for inner datepicker markup editing.
Methods allows external control on datepicker
$('.date').pickmeup('hide');
$('.date').pickmeup('show');
$('.date').pickmeup('prev');
$('.date').pickmeup('next');
$('.date').pickmeup('get_date', formatted);
formatted
- boolean or string (default false
)
false
-Date
objecttrue
- string formatted in accordance withformat
option- string is used to specify custom format instead if given during initialization
$('.date').pickmeup('set_date', date);
date
- can be single date string/object or array depending on selection mode
$('.date').pickmeup('clear');
Is useful, for example, after input field change
$('.date').pickmeup('update');
Destroys PickMeUp instance, removes created markup, restores everything that was changed to original state.
$('.date').pickmeup('destroy');
Current options (for whatever reason) can be accessed as $('...').data('pickmeup-options')
.
Root pickmeup element (jQuery collection object) can be accessed as $('...').get(0).pickmeup
or directly this.pickmeup
if inside callback.
If you want other colors - just change several variables in scss file.
To change size - adjust font-size
for root datepicker element, everything will scale nicely.
Feel free to create issues and send pull requests, they are highly appreciated!
Before reporting an issue, be so kind to prepare reproducible example on jsfiddle.net, please.
You can start with working demo of latest stable version of PickMeUp: jsfiddle.net/z4fmvuzb
MIT License, see license.txt