mirror of
https://github.com/frappe/air-datepicker.git
synced 2026-01-14 11:01:22 +08:00
553 lines
17 KiB
Plaintext
553 lines
17 KiB
Plaintext
extends ../layout
|
||
block content
|
||
a.lang-link(href='index-ru.html')
|
||
img(src='img/ru.png')
|
||
span На русском языке
|
||
|
||
h1.promo-header
|
||
| AIR DATEPICKER
|
||
span lightweight cross-browser jQuery datepicker
|
||
p.-text-center-
|
||
.datepicker-here.datepicker-promo
|
||
script.
|
||
var $promo = $('.datepicker-promo');
|
||
$promo.datepicker({
|
||
language: 'en'
|
||
})
|
||
article
|
||
h2#intro Description
|
||
p
|
||
| Light (<strong>~20kb</strong> minified js file and <strong>~5.5kb</strong> gziped) cross-browser calendar, built with
|
||
+example-inline('es5')
|
||
| and
|
||
+example-inline('css flexbox', 'js')
|
||
| .Works in all modern browsers:
|
||
| <strong>IE 10+</strong>, <strong>Chrome</strong>, <strong>Firefox</strong>, <strong>Safari 8+</strong>, <strong>Opera 17+</strong>.
|
||
article
|
||
h2#install Installation
|
||
+example-code('html') bower i --save air-datepicker
|
||
p Or you can download files directly from <a href="https://github.com/t1m0n/air-datepicker/tree/master/dist">GitHub</a>
|
||
article
|
||
h2#usage Usage
|
||
p
|
||
| Include styles and scripts from
|
||
+example-inline('/dist')
|
||
| directory:
|
||
+example-code('html')
|
||
:code
|
||
<html>
|
||
<head>
|
||
<link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css">
|
||
<script src="dist/js/datepicker.min.js"></script>
|
||
</head>
|
||
</html>
|
||
p
|
||
| Datepicker will automatically initialize on elements with class
|
||
+example-inline('.datepicker-here', 'css')
|
||
| , options may be sent via
|
||
+example-inline('data', 'html')
|
||
| attributes.
|
||
+example-code('html')
|
||
:code
|
||
<input type='text' class="datepicker-here" data-position="right top" />
|
||
h3 Manual initialization
|
||
+example-code('js').
|
||
// Initialization
|
||
$('#my-element').datepicker([options])
|
||
// Access instance of plugin
|
||
$('#my-element').data('datepicker')
|
||
article
|
||
h2#examples Examples
|
||
h3 Initialization with default options
|
||
+example
|
||
+example-content
|
||
input(type='text', data-language='en').datepicker-here
|
||
+example-code('html')
|
||
:code
|
||
<input type='text' class='datepicker-here', data-language='en' />
|
||
h3 Selecting multiple dates
|
||
p
|
||
| Pass parameter
|
||
+example-inline('{multipleDates: true}','js')
|
||
| for selection of multiple dates. If you want to limit the number of selected dates, pass the desired number
|
||
+example-inline('{multipleDates: 3}','js')
|
||
| .
|
||
+example
|
||
+example-content
|
||
input(type='text' data-multiple-dates='3' data-multiple-dates-separator=', ', data-position='top left', data-language='en').datepicker-here
|
||
+example-code('html')
|
||
:code
|
||
<input type="text"
|
||
class="datepicker-here"
|
||
data-language='en'
|
||
data-multiple-dates="3"
|
||
data-multiple-dates-separator=", "
|
||
data-position='top left'/>
|
||
h3 Permanently visible calendar
|
||
p
|
||
| Initialize plugin on non text input element, such as
|
||
+example-inline('<div> … </div>', 'html')
|
||
| ,or pass the parameter
|
||
+example-inline('{inline: true}', 'js')
|
||
| .
|
||
+example
|
||
+example-content
|
||
div.datepicker-here(data-language='en')
|
||
+example-code('html')
|
||
:code
|
||
<div class="datepicker-here" data-language='en'></div>
|
||
h3 Month selection
|
||
+example
|
||
+example-content
|
||
input.datepicker-here(type='text' data-min-view='months' data-view='months' data-date-format='MM yyyy' data-language='en')
|
||
+example-code('html')
|
||
:code
|
||
<input type="text"
|
||
class="datepicker-here"
|
||
data-language='en'
|
||
data-min-view="months"
|
||
data-view="months"
|
||
data-date-format="MM yyyy" />
|
||
h3 Minimum and maximum dates
|
||
p
|
||
| To limit date selection, use
|
||
+example-inline('minDate', 'js')
|
||
| and
|
||
+example-inline('maxDate', 'js')
|
||
| , they must receive JavaScript Date object.
|
||
+example
|
||
+example-content
|
||
input#minMaxExample(type='text')
|
||
script.
|
||
$('#minMaxExample').datepicker({
|
||
language: 'en',
|
||
minDate: new Date() // Now can select only dates, which goes after today
|
||
})
|
||
+example-code('js').
|
||
$('#minMaxExample').datepicker({
|
||
language: 'en',
|
||
minDate: new Date() // Now can select only dates, which goes after today
|
||
})
|
||
h3 Range
|
||
p.
|
||
By default there is no functionality to select dates range, but it can be easily achieved manually.
|
||
+example
|
||
+example-content
|
||
div.range-example
|
||
input(type='text' placeholder='Start')#start
|
||
span –
|
||
input(type='text' placeholder='End')#end
|
||
script.
|
||
var $start = $('#start'),
|
||
$end = $('#end');
|
||
$start.datepicker({
|
||
language: 'en',
|
||
onSelect: function (fd, date) {
|
||
$end.data('datepicker')
|
||
.update('minDate', date)
|
||
}
|
||
})
|
||
$end.datepicker({
|
||
language: 'en',
|
||
onSelect: function (fd, date) {
|
||
$start.data('datepicker')
|
||
.update('maxDate', date)
|
||
}
|
||
})
|
||
+example-code('js').
|
||
var $start = $('#start'),
|
||
$end = $('#end');
|
||
$start.datepicker({
|
||
language: 'en',
|
||
onSelect: function (fd, date) {
|
||
$end.data('datepicker')
|
||
.update('minDate', date)
|
||
}
|
||
})
|
||
$end.datepicker({
|
||
language: 'en',
|
||
onSelect: function (fd, date) {
|
||
$start.data('datepicker')
|
||
.update('maxDate', date)
|
||
}
|
||
})
|
||
article
|
||
h2#localization Localization
|
||
p
|
||
| You can add your localization to object
|
||
+example-inline('Datepicker.language["my-lang"]', 'js')
|
||
| and pass it name to parameter
|
||
+example-inline('language', 'js')
|
||
+example-code('js').
|
||
// Add custom localization
|
||
Datepicker.language['my-lang'] = {...}
|
||
|
||
// Initialize datepicker with it
|
||
$('.my-datepicker').datepicker({
|
||
language: 'my-lang'
|
||
})
|
||
p
|
||
| You can also pass localization object directly in
|
||
+example-inline('language', 'js')
|
||
+example-code('js').
|
||
$('.my-datepicker').datepicker({
|
||
language: {
|
||
days: [...]
|
||
...
|
||
}
|
||
})
|
||
p If some fields are missing, they will be taken from default localization object ('Russian').
|
||
h3 Example of localization object
|
||
+example-code('js').
|
||
Datepicker.language['en'] = {
|
||
days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
|
||
daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
||
daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
|
||
months: ['January','February','March','April','May','June', 'July','August','September','October','November','December'],
|
||
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||
today: 'Today',
|
||
clear: 'Clear',
|
||
dateFormat: 'mm/dd/yy',
|
||
firstDay: 0
|
||
};
|
||
p Available localizations located in
|
||
+example-inline('dist/js/i18n', 'js')
|
||
| directory.
|
||
article
|
||
h2#options Options
|
||
.param
|
||
+param-header('inline', 'boolean', 'false')
|
||
p If true, then datepicker will be always visible.
|
||
.param
|
||
+param-header('language', 'string|object', '"ru"')
|
||
p
|
||
| Datepicker's language. If string is passed, then language will be searched in
|
||
+example-inline('Datepicker.language', 'js')
|
||
| object.
|
||
| If object is passed, then data will be taken from this object directly.
|
||
p If some fields are missing, they will be taken from default localization object ('Russian').
|
||
.param
|
||
+param-header('startDate', 'Date', 'new Date()')
|
||
p This date will be shown at first initialization.
|
||
.param
|
||
+param-header('firstDay', 'number', '""')
|
||
p.
|
||
Day index from which week will be started. Possible values are from 0 to 6, where 0 - Sunday and 6 - Saturday.
|
||
By default value is taken from current localization, but if it passed here then it will have higher priority.
|
||
.param
|
||
+param-header('weekends', 'array', '[6, 0]')
|
||
p
|
||
| Array of day's indexes which will be considered as weekends. Class
|
||
+example-inline('.-weekend-','css')
|
||
| will be added to relevant cells.
|
||
| . By default its Saturday and Sunday.
|
||
.param
|
||
+param-header('dateFormat', 'string', '""')
|
||
p Desirable date format. It's combination of d, m, yyyy, D, M, etc. By default value is taken from current localization, but if it passed here, then it will have higher priority.
|
||
ul
|
||
li
|
||
+param('d')
|
||
| - date number
|
||
li
|
||
+param('dd')
|
||
| - date with leading zero
|
||
li
|
||
+param('D')
|
||
| - short day name
|
||
li
|
||
+param('DD')
|
||
| - full day name
|
||
li
|
||
+param('m')
|
||
| - month number
|
||
li
|
||
+param('mm')
|
||
| - month number with leading zero
|
||
li
|
||
+param('M')
|
||
| - short month name
|
||
li
|
||
+param('MM')
|
||
| - full month name
|
||
li
|
||
+param('yy')
|
||
| - two digit year number
|
||
li
|
||
+param('yyyy')
|
||
| - four digit year number
|
||
li
|
||
+param('yyyy1')
|
||
| - first year of decade, which included current year
|
||
li
|
||
+param('yyyy2')
|
||
| - last year of decade, which included current year
|
||
.param
|
||
+param-header('toggleSelected', 'boolean', 'true')
|
||
p If true, then clicking on selected cell will remove selection.
|
||
.param
|
||
+param-header('position', 'string', '"bottom left"')
|
||
p
|
||
| Position of datepicker relative to text input. First value is name of main axis, and second is position on that axis.
|
||
| For example
|
||
+example-inline('{position: "right top"}', 'js')
|
||
| - will set datepicker's position from right side on top of text input.
|
||
.param
|
||
+param-header('offset','number', 12)
|
||
p Offset from the main positioning axes.
|
||
.param
|
||
+param-header('view', 'string', '"days"')
|
||
p Start datepicker view. Possible values are:
|
||
ul
|
||
li
|
||
+example-inline('days','js')
|
||
| - display days of one month
|
||
li
|
||
+example-inline('months','js')
|
||
| - display months of one year
|
||
li
|
||
+example-inline('years','js')
|
||
| - display years of one decade
|
||
.param
|
||
+param-header('minView', 'string', '"days"')
|
||
p
|
||
| Minimal datepicker's view, on that view selecting cells will not trigger rendering next view, instead it will activate it.
|
||
| Possible values are the same as in
|
||
+example-inline('view')
|
||
| .
|
||
.param
|
||
+param-header('showOtherMonths', 'boolean', 'true')
|
||
p If true, then days from other months will be visible.
|
||
.param
|
||
+param-header('selectOtherMonths', 'boolean', 'true')
|
||
p If true, then one can select days form other months.
|
||
.param
|
||
+param-header('moveToOtherMonthsOnSelect', 'boolean', 'true')
|
||
p If true, then selecting days from other month, will cause transition to that month.
|
||
.param
|
||
+param-header('showOtherYears', 'boolean', 'true')
|
||
p If true, then years from other decades will be visible.
|
||
.param
|
||
+param-header('selectOtherYears', 'boolean', 'true')
|
||
p If true, then on can select years from other decades
|
||
.param
|
||
+param-header('moveToOtherYearsOnSelect', 'boolean', 'true')
|
||
p If true, then selecting year from other decade, will cause transition to that decade.
|
||
.param
|
||
+param-header('minDate', 'Date', '""')
|
||
p The minimum date for selection. All dates, running before it can't be activated.
|
||
.param
|
||
+param-header('maxDate', 'Date', '""')
|
||
p The maximum date for selection. All dates which comes after it cannot be selected.
|
||
.param
|
||
+param-header('disableNavWhenOutOfRange', 'boolean', 'true')
|
||
p If true, then at the date, which would be less than minimum possible or more then maximum possible, navigation buttons ('forward', 'back') will be deactivated.
|
||
.param
|
||
+param-header('multipleDates', 'boolean|number', 'false')
|
||
p If true, then one can select unlimited dates. If number is passed, then amount of selected dates will be limited by it.
|
||
.param
|
||
+param-header('multipleDatesSeparator', 'string', '","')
|
||
p Dates separator, which will be used when concatenating dates to string.
|
||
.param
|
||
+param-header('todayButton', 'boolean', 'false')
|
||
p If true, then button "Today" will be visible.
|
||
.param
|
||
+param-header('clearButton', 'boolean', 'false')
|
||
p If true, then button "Clear" will be visible.
|
||
.param
|
||
+param-header('showEvent','string','"focus"')
|
||
p Event type, on which datepicker should be shown.
|
||
.param
|
||
+param-header('autoClose', 'boolean', 'false')
|
||
p If true, when after date selection, datepicker will be closed.
|
||
.param
|
||
+param-header('prevHtml', 'string', '<svg><path d="M 17,12 l -5,5 l 5,5"></path></svg>')
|
||
p Contents of 'next' button.
|
||
.param
|
||
+param-header('nextHtml', 'string', '<svg><path d="M 14,12 l 5,5 l -5,5"></path></svg>')
|
||
p Contents of 'prev' button.
|
||
.param
|
||
+param-header('navTitles', 'object')
|
||
+example-code('js')
|
||
:code
|
||
navTitles = {
|
||
days: 'MM, <i>yyyy</i>',
|
||
months: 'yyyy',
|
||
years: 'yyyy1 - yyyy2'
|
||
};
|
||
p
|
||
| Content of datepicker's title depending on current view, can use same notation as in parameter
|
||
+example-inline('dateFormat', 'js')
|
||
| . Missing fields will be taken from default values. Html tags are also possible.
|
||
+example-code('js')
|
||
:code
|
||
$('#my-datepicker').datepicker({
|
||
navTitles: {
|
||
days: '<h3>Check in date:</h3> MM, yyyy'
|
||
}
|
||
})
|
||
.param
|
||
+param-header('monthsField','string','"monthsShort"')
|
||
p Field name from localization object which should be used as months names, when view is 'months'.
|
||
|
||
article
|
||
h2#events Events
|
||
.param
|
||
+param-header('onSelect(formattedDate, date, inst)', 'function', 'null')
|
||
p Callback when selecting date
|
||
ul
|
||
li
|
||
+param('formattedDate', 'string')
|
||
| - formatted date.
|
||
li
|
||
+param('date', 'Date|array')
|
||
| - JavaScript Date object
|
||
| if
|
||
+example-inline('{multipleDates: true}', 'js')
|
||
| , then it will be an array of js dates.
|
||
li
|
||
+param('inst','object')
|
||
| - plugin instance.
|
||
.param
|
||
+param-header('onChangeMonth(month, year)','function','null')
|
||
p Callback when months are changed.
|
||
ul
|
||
li
|
||
+param('month','number')
|
||
| - month number (from 0 to 12), to which transition is done.
|
||
li
|
||
+param('year','number')
|
||
| - year, to which transition is done.
|
||
.param
|
||
+param-header('onChangeYear(year)','function', 'null')
|
||
p Callback when year is changed
|
||
ul
|
||
li
|
||
+param('year','number')
|
||
| - year, to which transition is done.
|
||
.param
|
||
+param-header('onChangeDecade(decade)','function', 'null')
|
||
p Callback when decade is changed
|
||
ul
|
||
li
|
||
+param('decade','array')
|
||
| - array which consists of two years: first year in decade and last year in decade.
|
||
.param
|
||
+param-header('onChangeView(view)', 'function', 'null')
|
||
p Callback when datepicker's view is changed
|
||
ul
|
||
li
|
||
+param('view', 'string')
|
||
| - view name, to which transition is done (days, months, years).
|
||
.param
|
||
+param-header('onRenderCell(date, cellType)', 'function', 'null')
|
||
p Callback when datepicker's cell is rendered.
|
||
ul
|
||
li
|
||
+param('date', 'Date')
|
||
| - current cell date
|
||
li
|
||
+param('cellType', 'string')
|
||
| - current cell type (day, month, year).
|
||
p The callback must return object which may consists of three fields:
|
||
+example-code('js').
|
||
{
|
||
html: '', // Custom cell content
|
||
classes: '', // Extra css classes to cell
|
||
disabled: '' // true/false, if true, when cell will be disabled
|
||
}
|
||
h4 Example
|
||
+example-code('js').
|
||
$('#my-datepicker').datepicker({
|
||
// Let's make a function which will add class 'my-class' to every 11 of the month
|
||
// and make these cells disabled.
|
||
onRenderCell: function(date, cellType) {
|
||
if (cellType == 'day' && date.getDate() == 11) {
|
||
return {
|
||
classes: 'my-class',
|
||
disabled: true
|
||
}
|
||
}
|
||
}
|
||
})
|
||
article
|
||
h2#api API
|
||
p
|
||
| Plugin instance is accessible through
|
||
+example-inline('data')
|
||
| attribute.
|
||
+example-code('js').
|
||
var myDatepicker = $('#my-elem').datepicker().data('datepicker');
|
||
myDatepicker.show();
|
||
.param
|
||
+param-header('show()')
|
||
p Shows datepicker.
|
||
.param
|
||
+param-header('hide()')
|
||
p Hides datepicker.
|
||
.param
|
||
+param-header('next()')
|
||
p Renders next month, year or decade, depending on current view.
|
||
.param
|
||
+param-header('prev()')
|
||
p Renders previous month, year or decade, depending on current view.
|
||
.param
|
||
+param-header('selectDate(date)')
|
||
ul
|
||
li
|
||
+param('date','Date')
|
||
| - JavaScript
|
||
+example-inline('Date()', 'js')
|
||
p
|
||
| Activates passed date. If
|
||
+example-inline('{multipleDates: false}','js')
|
||
| and date is already active, then it will be deactivated. If
|
||
+example-inline('{multipleDates: true}','js')
|
||
| then another active date will be added.
|
||
.param
|
||
+param-header('removeDate(date)')
|
||
ul
|
||
li
|
||
+param('date','Date')
|
||
| - JavaScript
|
||
+example-inline('Date()', 'js')
|
||
p
|
||
| Removes selection from passed date.
|
||
|
||
.param
|
||
+param-header('clear()')
|
||
p Clears all selected dates.
|
||
|
||
.param
|
||
+param-header('update(field[, value])')
|
||
ul
|
||
li
|
||
+param('field','string|object')
|
||
| - field name which must be updated.
|
||
li
|
||
+param('field','string|*')
|
||
| - new value.
|
||
p.
|
||
This method updates datepicker's options. After calling this method, datepicker will be redrawn.
|
||
You can update several parameters at one time, just pass in object with necessary fields.
|
||
+example-code('js').
|
||
var datepicker = $('#my-elem').datepicker().data('datepicker');
|
||
// Single parameter update
|
||
datepicker.update('minDate', new Date())
|
||
// Multiple parameters
|
||
datepicker.update({
|
||
position: "top right",
|
||
maxDate: new Date(),
|
||
todayButton: true
|
||
})
|
||
.param
|
||
+param-header('view')
|
||
p Sets new view for datepicker.
|
||
+example-code('js').
|
||
datepicker.view = 'months';
|
||
.param
|
||
+param-header('date')
|
||
p
|
||
| Sets new viewing date for datepicker, must pass a JavaScript Date object
|
||
+example-inline('Date()')
|
||
+example-code('js').
|
||
datepicker.date = new Date(); |