mirror of
https://github.com/frappe/air-datepicker.git
synced 2026-01-14 11:01:22 +08:00
552 lines
17 KiB
Plaintext
552 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 to an instance of an object
|
||
$('#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 the 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').datepicker-here
|
||
+example-code('html')
|
||
:code
|
||
<input type="text"
|
||
class="datepicker-here"
|
||
data-multiple-dates="3"
|
||
data-multiple-dates-separator=", "
|
||
data-position='right top'/>
|
||
h3 Permanently visible calendar
|
||
p
|
||
| Initialize the 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 Which date must 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 и 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 must be considered as holidays. Class
|
||
+example-inline('.-weekend-','css')
|
||
| will be added to relevant cells.
|
||
| . By default its saturday and sunday.
|
||
.param
|
||
+param-header('dateFormat', 'string', '""')
|
||
p Format of date, it's combination of d, m, yyyy, D, M, и т.д. 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 must 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 Which field from localization object must 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 on 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(); |