JS Tutorial
- Overview
- Documents
PickMeUp is a jQuery datepicker plugin that is Really simple, powerful and customizable datepicker.
Browser support:
- IE 10+
- Opera 12.1+
- Latest versions of Firefox and Chrome
Source: github.com
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="css/pickmeup.css" type="text/css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.pickmeup.js"></script>
2. HTML
<input type="text" value="01-01-2014">
3. JAVASCRIPT
$('input').pickmeup({
position : 'right',
hide_on_select : true
});
4. OPTIONS
| 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 |
| select_month | boolean | true | Allow or deny months selection |
| select_year | boolean | true | Allow or deny year selection (obviously, depends onselect_month option) |
| 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 |
5. EVENTS
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: if true - date will be selected
- disabled: if true - date will be disabled
- class_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.
6. METHODS
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 object
- true - string formatted in accordance with format 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');
