Really simple, powerful and customizable datepicker.
Author - Nazar Mokrynskyi
Based on DatePicker by Stefan Petre
It is very small:
- 16.7 KiB minified JavaScript (4.7 KiB gzip)
- 2.2 KiB minified CSS (703 B gzip)
- 0 KiB images
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>| 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 |
| 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 |
| 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 | 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
Methods allows external control on datepicker
$('.date').pickmeup('hide');$('.date').pickmeup('show');$('.date').pickmeup('get_date', formatted);formatted - boolean (default false)
$('.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');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!
MIT License, see license.txt