Описание
Легкий (~34kb минифицированный js файл и ~9kb gziped), кастомизируемый, кроссбраузерный календарь, написан с использованиемes5иcss flexbox. Работает во всех современных браузерах:
+
Описание
Легкий (~36kb минифицированный js файл и ~9kb gziped), кастомизируемый, кроссбраузерный календарь, написан с использованиемes5иcss flexbox. Работает во всех современных браузерах:
IE 10+, Chrome, Firefox, Safari 8+, Opera 17+.
Установка
bower i --save air-datepickerЛибо можно скачать файлы напрямую с GitHub
Использование
Подключите стили и скрипты из папки/dist:
<html>
<head>
<link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css">
diff --git a/docs/index.html b/docs/index.html
index ef124e4..528d0b3 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,138 +1,173 @@
Air Datepicker 
На русском языкеAIR DATEPICKERlightweight cross-browser jQuery datepicker
Description
Light (~34kb minified js file and ~9kb gziped) customizable cross-browser calendar, built withes5andcss flexbox.Works in all modern browsers:
+ language: 'en'
+})
Description
Light (~36kb minified js file and ~9kb gziped) customizable cross-browser calendar, built withes5andcss flexbox.Works in all modern browsers:
IE 10+, Chrome, Firefox, Safari 8+, Opera 17+.
Installation
bower i --save air-datepicker
Or you can download files directly from GitHub
Usage
Include styles and scripts from/distdirectory:
<html>
- <head>
- <link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css">
- <script src="dist/js/datepicker.min.js"></script>
+ <head>
+ <link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css">
+ <script src="dist/js/datepicker.min.js"></script>
- <!-- Include English language -->
- <script src="dist/js/i18n/datepicker.en.js"></script>
- </head>
+ <!-- Include English language -->
+ <script src="dist/js/i18n/datepicker.en.js"></script>
+ </head>
</html>
Datepicker will automatically initialize on elements with class.datepicker-here, options may be sent viadataattributes.
<input type='text' class="datepicker-here" data-position="right top" />
Manual initialization
// Initialization
$('#my-element').datepicker([options])
// Access instance of plugin
$('#my-element').data('datepicker')
Examples
Initialization with default options
Example<input type='text' class='datepicker-here' data-language='en' />
Selecting multiple dates
Pass parameter{multipleDates: true}for selection of multiple dates. If you want to limit the number of selected dates, pass the desired number{multipleDates: 3}.
Example<input type="text"
- class="datepicker-here"
- data-language='en'
- data-multiple-dates="3"
- data-multiple-dates-separator=", "
- data-position='top left'/>
Permanently visible calendar
Initialize plugin on non text input element, such as<div> … </div>,or pass the parameter{inline: true}.
Example<div class="datepicker-here" data-language='en'></div>
Month selection
Example<input type="text"
- class="datepicker-here"
- data-language='en'
- data-min-view="months"
- data-view="months"
- data-date-format="MM yyyy" />
Minimum and maximum dates
To limit date selection, useminDateandmaxDate, they must receive JavaScript Date object.
Example$('#minMaxExample').datepicker({
- language: 'en',
- minDate: new Date() // Now can select only dates, which goes after today
+ language: 'en',
+ minDate: new Date() // Now can select only dates, which goes after today
})
-
Range of dates
Use{range: true}for choosing range of dates. As dates separatormultipleDatesSeparatorwill be used.
Example<input type="text"
- data-range="true"
- data-multiple-dates-separator=" - "
- data-language="en"
- class="datepicker-here"/>
+
Range of dates
Use{range: true}for choosing range of dates. As dates separatormultipleDatesSeparatorwill be used.
For possibility to select same date two times, you should set{toggleSelected: false}.
Example<input type="text"
+ data-range="true"
+ data-multiple-dates-separator=" - "
+ data-language="en"
+ class="datepicker-here"/>
Disable days of week
For disabling days, useonRenderCell.
Example// Make Sunday and Saturday disabled
var disabledDays = [0, 6];
$('#disabled-days').datepicker({
- language: 'en',
- onRenderCell: function (date, cellType) {
- if (cellType == 'day') {
- var day = date.getDay(),
- isDisabled = disabledDays.indexOf(day) != -1;
+ language: 'en',
+ onRenderCell: function (date, cellType) {
+ if (cellType == 'day') {
+ var day = date.getDay(),
+ isDisabled = disabledDays.indexOf(day) != -1;
- return {
- disabled: isDisabled
- }
- }
- }
+ return {
+ disabled: isDisabled
+ }
+ }
+ }
})
Custom cells content
Air Datepicker allows you to change contents of cells like you want. You could useonRenderCellfor this purpose.
Lets add extra elements to several dates, and show `lorem` text when selecting them.
Examplevar eventDates = [1, 10, 12, 22],
- $picker = $('#custom-cells'),
- $content = $('#custom-cells-events'),
- sentences = [ … ];
+ $picker = $('#custom-cells'),
+ $content = $('#custom-cells-events'),
+ sentences = [ … ];
$picker.datepicker({
- language: 'en',
- onRenderCell: function (date, cellType) {
- var currentDate = date.getDate();
- // Add extra element, if `eventDates` contains `currentDate`
- if (cellType == 'day' && eventDates.indexOf(currentDate) != -1) {
- return {
- html: currentDate + '<span class="dp-note"></span>'
- }
- }
- },
- onSelect: function onSelect(fd, date) {
- var title = '', content = ''
- // If date with event is selected, show it
- if (date && eventDates.indexOf(date.getDate()) != -1) {
- title = fd;
- content = sentences[Math.floor(Math.random() * eventDates.length)];
- }
- $('strong', $content).html(title)
- $('p', $content).html(content)
- }
+ language: 'en',
+ onRenderCell: function (date, cellType) {
+ var currentDate = date.getDate();
+ // Add extra element, if `eventDates` contains `currentDate`
+ if (cellType == 'day' && eventDates.indexOf(currentDate) != -1) {
+ return {
+ html: currentDate + '<span class="dp-note"></span>'
+ }
+ }
+ },
+ onSelect: function onSelect(fd, date) {
+ var title = '', content = ''
+ // If date with event is selected, show it
+ if (date && eventDates.indexOf(date.getDate()) != -1) {
+ title = fd;
+ content = sentences[Math.floor(Math.random() * eventDates.length)];
+ }
+ $('strong', $content).html(title)
+ $('p', $content).html(content)
+ }
})
// Select initial date from `eventDates`
var currentDate = currentDate = new Date();
$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
-
Timepicker
To enable timepicker use option{timepicker: true}- it will add current time and a couple of range sliders by which one can pick time.
By default current user time will be set. This value can be changed bystartDateparameter.
Example<div class="datepicker-here" data-timepicker="true" data-language='en'></div>
More detailed info about timepicker parameters you can find in Options.
Time format
Time format is defined in localization object or intimeFormatparameter. By default (in Russian language) 24 hours format is used. For enabling 12 hours mode you must addaaorAAsymbol intimeFormat. After what 'AM' and 'PM' sings will appear in timepicker widget.
Lets use 12 hours mode in Russian language:
Example<div class="datepicker-here" data-timepicker="true" data-time-format='hh:ii aa'></div>
+
Showing and hiding calendar
For adding some actions while datepicker is showing or hiding, useonShowandonHidecallbacks.
Example$('#example-show-hide-callbacks').datepicker({
+ language: 'en',
+ onShow: function(dp, animationCompleted){
+ if (!animationCompleted) {
+ log('start showing')
+ } else {
+ log('finished showing')
+ }
+ },
+ onHide: function(dp, animationCompleted){
+ if (!animationCompleted) {
+ log('start hiding')
+ } else {
+ log('finished hiding')
+ }
+ }
+})
Timepicker
To enable timepicker use option{timepicker: true}- it will add current time and a couple of range sliders by which one can pick time.
By default current user time will be set. This value can be changed bystartDateparameter.
Example<div class="datepicker-here" data-timepicker="true" data-language='en'></div>
More detailed info about timepicker parameters you can find in Options.
Time format
Time format is defined in localization object or intimeFormatparameter. By default (in Russian language) 24 hours format is used. For enabling 12 hours mode you must addaaorAAsymbol intimeFormat. After what 'AM' and 'PM' sings will appear in timepicker widget.
Lets use 12 hours mode in Russian language:
Example<div class="datepicker-here" data-timepicker="true" data-time-format='hh:ii aa'></div>
Actions with time
For setting max/min hours or minutes values usemaxHours,minHours,maxMinutes,minMinutes. You also could set time inminDateandmaxDate. For setting hours you must use values between 0 and 23, event if 12 hours mode is on. Plugin will automatically transform given values to 12 hours format.
Lets create calendar where user can choose time between 09:00 am and 06:00 pm on working days and on Saturday and Sunday between from 10:00 am to 04:00 pm.
Example<input type='text' id='timepicker-actions-exmpl' />
<script>
- // Create start date
- var start = new Date(),
- prevDay,
- startHours = 9;
+ // Create start date
+ var start = new Date(),
+ prevDay,
+ startHours = 9;
- // 09:00 AM
- start.setHours(9);
- start.setMinutes(0);
+ // 09:00 AM
+ start.setHours(9);
+ start.setMinutes(0);
- // If today is Saturday or Sunday set 10:00 AM
- if ([6, 0].indexOf(start.getDay()) != -1) {
- start.setHours(10);
- startHours = 10
- }
+ // If today is Saturday or Sunday set 10:00 AM
+ if ([6, 0].indexOf(start.getDay()) != -1) {
+ start.setHours(10);
+ startHours = 10
+ }
- $('#timepicker-actions-exmpl').datepicker({
- timepicker: true,
- language: 'en',
- startDate: start,
- minHours: startHours,
- maxHours: 18,
- onSelect: function (fd, d, picker) {
- // Do nothing if selection was cleared
- if (!d) return;
+ $('#timepicker-actions-exmpl').datepicker({
+ timepicker: true,
+ language: 'en',
+ startDate: start,
+ minHours: startHours,
+ maxHours: 18,
+ onSelect: function (fd, d, picker) {
+ // Do nothing if selection was cleared
+ if (!d) return;
- var day = d.getDay();
+ var day = d.getDay();
- // Trigger only if date is changed
- if (prevDay != undefined && prevDay == day) return;
- prevDay = day;
+ // Trigger only if date is changed
+ if (prevDay != undefined && prevDay == day) return;
+ prevDay = day;
- // If chosen day is Saturday or Sunday when set
- // hour value for weekends, else restore defaults
- if (day == 6 || day == 0) {
- picker.update({
- minHours: 10,
- maxHours: 16
- })
- } else {
- picker.update({
- minHours: 9,
- maxHours: 18
- })
- }
- }
- })
+ // If chosen day is Saturday or Sunday when set
+ // hour value for weekends, else restore defaults
+ if (day == 6 || day == 0) {
+ picker.update({
+ minHours: 10,
+ maxHours: 16
+ })
+ } else {
+ picker.update({
+ minHours: 9,
+ maxHours: 18
+ })
+ }
+ }
+ })
</script>
Localization
You can add your localization to object$.fn.datepicker.language["my-lang"]and pass it name to parameterlanguage
// Add custom localization
$.fn.datepicker.language['my-lang'] = {...}
// Initialize datepicker with it
$('.my-datepicker').datepicker({
- language: 'my-lang'
+ language: 'my-lang'
})
You can also pass localization object directly inlanguage
$('.my-datepicker').datepicker({
- language: {
- days: [...]
- ...
- }
+ language: {
+ days: [...]
+ ...
+ }
})
If some fields are missing, they will be taken from default localization object ('Russian').
Example of localization object
$.fn.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/yyyy',
- timeFormat: 'hh:ii aa'
- firstDay: 0
+ 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/yyyy',
+ timeFormat: 'hh:ii aa'
+ firstDay: 0
};
Available localizations located indist/js/i18ndirectory.
Options
classes
Typestring
Defaults""
Extra css classes for datepicker.
inline
Typeboolean
Defaultsfalse
If true, then datepicker will be always visible.
language
Typestring|object
Defaults"ru"
Datepicker's language. If string is passed, then language will be searched inDatepicker.languageobject.
If object is passed, then data will be taken from this object directly.
If some fields are missing, they will be taken from default localization object ('Russian').
startDate
TypeDate
Defaultsnew Date()
This date will be shown at first initialization.
firstDay
Typenumber
Defaults""
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.
weekends
Typearray
Defaults[6, 0]
Array of day's indexes which will be considered as weekends. Class.-weekend-will be added to relevant cells.
@@ -251,43 +286,46 @@ By default value is taken from current localization, but if it passed here then
For example{position: "right top"}- will set datepicker's position from right side on top of text input.
offset
Typenumber
Defaults12
Offset from the main positioning axes.
view
Typestring
Defaults"days"
Start datepicker view. Possible values are:
days- display days of one monthmonths- display months of one yearyears- display years of one decade
minView
Typestring
Defaults"days"
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 inview.
showOtherMonths
Typeboolean
Defaultstrue
If true, then days from other months will be visible.
selectOtherMonths
Typeboolean
Defaultstrue
If true, then one can select days form other months.
moveToOtherMonthsOnSelect
Typeboolean
Defaultstrue
If true, then selecting days from other month, will cause transition to that month.
showOtherYears
Typeboolean
Defaultstrue
If true, then years from other decades will be visible.
selectOtherYears
Typeboolean
Defaultstrue
If true, then on can select years from other decades
moveToOtherYearsOnSelect
Typeboolean
Defaultstrue
If true, then selecting year from other decade, will cause transition to that decade.
minDate
TypeDate
Defaults""
The minimum date for selection. All dates, running before it can't be activated.
maxDate
TypeDate
Defaults""
The maximum date for selection. All dates which comes after it cannot be selected.
disableNavWhenOutOfRange
Typeboolean
Defaultstrue
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.
multipleDates
Typeboolean|number
Defaultsfalse
If true, then one can select unlimited dates. If number is passed, then amount of selected dates will be limited by it.
multipleDatesSeparator
Typestring
Defaults","
Dates separator, which will be used when concatenating dates to string.
range
Typeboolean
Defaultsfalse
For selecting dates range, turn this option to true.multipleDatesSeparatorwill be used as dates separator.
todayButton
Typeboolean|Date
Defaultsfalse
If true, then button "Today" will be visible. If Date is passed then click event will also select passed date.
// Select today
$('.datepicker').datepicker({
- todayButton: new Date()
+ todayButton: new Date()
})
clearButton
Typeboolean
Defaultsfalse
If true, then button "Clear" will be visible.
showEvent
Typestring
Defaults"focus"
Event type, on which datepicker should be shown.
autoClose
Typeboolean
Defaultsfalse
If true, then after date selection, datepicker will be closed.
prevHtml
Typestring
Defaults<svg><path d="M 17,12 l -5,5 l 5,5"></path></svg>
Contents of 'next' button.
nextHtml
Typestring
Defaults<svg><path d="M 14,12 l 5,5 l -5,5"></path></svg>
Contents of 'prev' button.
navTitles
Typeobject
Defaults
navTitles = {
- days: 'MM, <i>yyyy</i>',
- months: 'yyyy',
- years: 'yyyy1 - yyyy2'
+ days: 'MM, <i>yyyy</i>',
+ months: 'yyyy',
+ years: 'yyyy1 - yyyy2'
};
Content of datepicker's title depending on current view, can use same notation as in parameterdateFormat. Missing fields will be taken from default values. Html tags are also possible.
$('#my-datepicker').datepicker({
- navTitles: {
- days: '<h3>Check in date:</h3> MM, yyyy'
- }
+ navTitles: {
+ days: '<h3>Check in date:</h3> MM, yyyy'
+ }
})
monthsField
Typestring
Defaults"monthsShort"
Field name from localization object which should be used as months names, when view is 'months'.
timepicker
Typeboolean
Defaultsfalse
Iftrue, when timepicker widget will be added.
dateTimeSeparator
Typestring
Defaults" "
Separator between date and time
timeFormat
Typestring
Defaultsnull
Desirable time format. Taken from localization by default. If value passed here, then it will be used instead.
For using 12 hours mode, add "aa" or "AA" to yourtimeFormatparameter, e.g.{timeFormat: "hh:ii AA"}Possible values are:
- h- hours
- hh- hours with leading zero
- i- minutes
- ii- minutes with leading zero
- aa- day period - 'am' or 'pm'
- AA- day period capitalized
minHours
Typenumber
Defaults0
Minimal hours value, must be between 0 and 23. You will not be able to choose value lower than this.
maxHours
Typenumber
Defaults23
Maximum hours value, must be between 0 and 23. You will not be able to choose value higher than this.
minMinutes
Typenumber
Defaults0
Minimal minutes value, must be between 0 and 59. You will not be able to choose value lower than this.
maxMinutes
Typenumber
Defaults59
Maximum minutes value, must be between 0 and 59. You will not be able to choose value higher than this.
hoursStep
Typenumber
Defaults1
Hours step in slider.
minutesStep
Typenumber
Defaults1
Minutes step in slider.
Events
onSelect(formattedDate, date, inst)
Typefunction
Defaultsnull
Callback when selecting date
- formattedDatestring- formatted date.
- dateDate|array- JavaScript Date object
-if
{multipleDates: true}, then it will be an array of js dates. - instobject- plugin instance.
onChangeMonth(month, year)
Typefunction
Defaultsnull
Callback when months are changed.
- monthnumber- month number (from 0 to 12), to which transition is done.
- yearnumber- year, to which transition is done.
onChangeYear(year)
Typefunction
Defaultsnull
Callback when year is changed
- yearnumber- year, to which transition is done.
onChangeDecade(decade)
Typefunction
Defaultsnull
Callback when decade is changed
- decadearray- array which consists of two years: first year in decade and last year in decade.
onChangeView(view)
Typefunction
Defaultsnull
Callback when datepicker's view is changed
- viewstring- view name, to which transition is done (days, months, years).
onRenderCell(date, cellType)
Typefunction
Defaultsnull
Callback when datepicker's cell is rendered.
- dateDate- current cell date
- cellTypestring- current cell type (day, month, year).
The callback must return object which may consists of three fields:
{
- html: '', // Custom cell content
- classes: '', // Extra css classes to cell
- disabled: '' // true/false, if true, then cell will be disabled
+if{multipleDates: true}, then it will be an array of js dates.instobject- plugin instance.
onShow(inst, animationCompleted)
Typefunction
Defaultsnull
Callback when calendar is showing.
- instObject- plugin instance.
- animationCompletedboolean- animation indicator.
+if its
false, when animation has just begun, iftrue- already ended.
onHide(inst, animationCompleted)
Typefunction
Defaultsnull
Callback when calendar is hiding.
- instObject- plugin instance.
- animationCompletedboolean- animation indicator.
+if its
false, when animation has just begun, iftrue- already ended.
onChangeMonth(month, year)
Typefunction
Defaultsnull
Callback when months are changed.
- monthnumber- month number (from 0 to 12), to which transition is done.
- yearnumber- year, to which transition is done.
onChangeYear(year)
Typefunction
Defaultsnull
Callback when year is changed
- yearnumber- year, to which transition is done.
onChangeDecade(decade)
Typefunction
Defaultsnull
Callback when decade is changed
- decadearray- array which consists of two years: first year in decade and last year in decade.
onChangeView(view)
Typefunction
Defaultsnull
Callback when datepicker's view is changed
- viewstring- view name, to which transition is done (days, months, years).
onRenderCell(date, cellType)
Typefunction
Defaultsnull
Callback when datepicker's cell is rendered.
- dateDate- current cell date
- cellTypestring- current cell type (day, month, year).
The callback must return object which may consists of three fields:
{
+ html: '', // Custom cell content
+ classes: '', // Extra css classes to cell
+ disabled: '' // true/false, if true, then cell will be disabled
}
Example
$('#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
- }
- }
- }
+ // 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
+ }
+ }
+ }
})
API
Plugin instance is accessible throughdataattribute.
var myDatepicker = $('#my-elem').datepicker().data('datepicker');
-myDatepicker.show();
show()
Shows datepicker.
hide()
Hides datepicker.
next()
Renders next month, year or decade, depending on current view.
prev()
Renders previous month, year or decade, depending on current view.
selectDate(date)
- dateDate|Array- JavaScript
Date(), or array of dates.
Activates passed date or multiple dates if array is passed. If{multipleDates: false}and date is already active, then it will be deactivated. If{multipleDates: true}then another active date will be added.
removeDate(date)
- dateDate- JavaScript
Date()
Removes selection from passed date.
clear()
Clears all selected dates.
update(field[, value])
- fieldstring|object- field name which must be updated.
- fieldstring|*- new value.
This method updates datepicker's options. After calling this method, datepicker will be redrawn.
+myDatepicker.show();
show()
Shows datepicker.
hide()
Hides datepicker.
destroy()
Destroys datepicker.
next()
Renders next month, year or decade, depending on current view.
prev()
Renders previous month, year or decade, depending on current view.
selectDate(date)
- dateDate|Array- JavaScript
Date(), or array of dates.
Activates passed date or multiple dates if array is passed. If{multipleDates: false}and date is already active, then it will be deactivated. If{multipleDates: true}then another active date will be added.
removeDate(date)
- dateDate- JavaScript
Date()
Removes selection from passed date.
clear()
Clears all selected dates.
update(field[, value])
- fieldstring|object- field name which must be updated.
- fieldstring|*- new value.
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.
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
-})
view
Sets new view for datepicker.
datepicker.view = 'months';
date
Sets new viewing date for datepicker, must pass a JavaScript Date objectDate()
datepicker.date = new Date();
Check in date:
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'.
+ .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('range', 'boolean', 'false')
+ p For selecting dates range, turn this option to true.
+ +example-inline('multipleDatesSeparator')
+ | will be used as dates separator.
+ .param
+ +param-header('todayButton', 'boolean|Date', 'false')
+ p If true, then button "Today" will be visible. If Date is passed then click event will also select passed date.
+ +example-code('js').
+ // Select today
+ $('.datepicker').datepicker({
+ todayButton: new Date()
+ })
+ .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, then after date selection, datepicker will be closed.
+ .param
+ +param-header('prevHtml', 'string', '')
+ p Contents of 'next' button.
+ .param
+ +param-header('nextHtml', 'string', '')
+ p Contents of 'prev' button.
+ .param
+ +param-header('navTitles', 'object')
+ +example-code('js')
+ :code
+ navTitles = {
+ days: 'MM, yyyy',
+ 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: 'Check in date:
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'.
- .param
- +param-header('timepicker', 'boolean', 'false', 'opts-timepicker')
- p If
- +example-inline('true')
- | , when timepicker widget will be added.
+ .param
+ +param-header('timepicker', 'boolean', 'false', 'opts-timepicker')
+ p If
+ +example-inline('true')
+ | , when timepicker widget will be added.
- .param
- +param-header('dateTimeSeparator', 'string', '" "', 'opts-dateTimeSeparator')
- p Separator between date and time
+ .param
+ +param-header('dateTimeSeparator', 'string', '" "', 'opts-dateTimeSeparator')
+ p Separator between date and time
- .param
- +param-header('timeFormat', 'string', 'null', 'opts-timeFormat')
- p
- | Desirable time format. Taken from localization by default. If value passed here, then it will be used instead.
- | For using 12 hours mode, add "aa" or "AA" to your
- +example-inline('timeFormat','js')
- | parameter, e.g.
- +example-inline('{timeFormat: "hh:ii AA"}','js')
- | Possible values are:
- ul
- li
- +param('h')
- | - hours
- li
- +param('hh')
- | - hours with leading zero
- li
- +param('i')
- | - minutes
- li
- +param('ii')
- | - minutes with leading zero
- li
- +param('aa')
- | - day period - 'am' or 'pm'
- li
- +param('AA')
- | - day period capitalized
+ .param
+ +param-header('timeFormat', 'string', 'null', 'opts-timeFormat')
+ p
+ | Desirable time format. Taken from localization by default. If value passed here, then it will be used instead.
+ | For using 12 hours mode, add "aa" or "AA" to your
+ +example-inline('timeFormat','js')
+ | parameter, e.g.
+ +example-inline('{timeFormat: "hh:ii AA"}','js')
+ | Possible values are:
+ ul
+ li
+ +param('h')
+ | - hours
+ li
+ +param('hh')
+ | - hours with leading zero
+ li
+ +param('i')
+ | - minutes
+ li
+ +param('ii')
+ | - minutes with leading zero
+ li
+ +param('aa')
+ | - day period - 'am' or 'pm'
+ li
+ +param('AA')
+ | - day period capitalized
- .param
- +param-header('minHours', 'number', '0', 'opts-minHours')
- p Minimal hours value, must be between 0 and 23. You will not be able to choose value lower than this.
+ .param
+ +param-header('minHours', 'number', '0', 'opts-minHours')
+ p Minimal hours value, must be between 0 and 23. You will not be able to choose value lower than this.
- .param
- +param-header('maxHours', 'number', '23', 'opts-maxHours')
- p Maximum hours value, must be between 0 and 23. You will not be able to choose value higher than this.
+ .param
+ +param-header('maxHours', 'number', '23', 'opts-maxHours')
+ p Maximum hours value, must be between 0 and 23. You will not be able to choose value higher than this.
- .param
- +param-header('minMinutes', 'number', '0', 'opts-minMinutes')
- p Minimal minutes value, must be between 0 and 59. You will not be able to choose value lower than this.
+ .param
+ +param-header('minMinutes', 'number', '0', 'opts-minMinutes')
+ p Minimal minutes value, must be between 0 and 59. You will not be able to choose value lower than this.
- .param
- +param-header('maxMinutes', 'number', '59', 'opts-maxMinutes')
- p Maximum minutes value, must be between 0 and 59. You will not be able to choose value higher than this.
+ .param
+ +param-header('maxMinutes', 'number', '59', 'opts-maxMinutes')
+ p Maximum minutes value, must be between 0 and 59. You will not be able to choose value higher than this.
- .param
- +param-header('hoursStep', 'number', '1', 'opts-hoursStep')
- p Hours step in slider.
+ .param
+ +param-header('hoursStep', 'number', '1', 'opts-hoursStep')
+ p Hours step in slider.
- .param
- +param-header('minutesStep', 'number', '1', 'opts-minutesStep')
- p Minutes step in slider.
+ .param
+ +param-header('minutesStep', 'number', '1', 'opts-minutesStep')
+ p Minutes step in slider.
- 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, then 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|Array')
- | - JavaScript
- +example-inline('Date()', 'js')
- |, or array of dates.
- p
- | Activates passed date or multiple dates if array is passed. 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.
+ 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('onShow(inst, animationCompleted)', 'function', 'null')
+ p Callback when calendar is showing.
+ ul
+ li
+ +param('inst', 'Object')
+ | - plugin instance.
+ li
+ +param('animationCompleted','boolean')
+ | - animation indicator.
+ | if its
+ +example-inline('false')
+ | , when animation has just begun, if
+ +example-inline('true')
+ | - already ended.
- .param
- +param-header('clear()')
- p Clears all selected dates.
+ .param
+ +param-header('onHide(inst, animationCompleted)', 'function', 'null')
+ p Callback when calendar is hiding.
+ ul
+ li
+ +param('inst', 'Object')
+ | - plugin instance.
+ li
+ +param('animationCompleted','boolean')
+ | - animation indicator.
+ | if its
+ +example-inline('false')
+ | , when animation has just begun, if
+ +example-inline('true')
+ | - already ended.
- .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();
\ No newline at end of file
+ .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, then 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('destroy()')
+ p Destroys 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|Array')
+ | - JavaScript
+ +example-inline('Date()', 'js')
+ | , or array of dates.
+ p
+ | Activates passed date or multiple dates if array is passed. 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();
+
+ .param
+ +param-header('$el')
+ p Datepicker's DOM element
+
+ .param
+ +param-header('selectedDates')
+ p Array of selected dates
\ No newline at end of file
diff --git a/docs/js/logger.js b/docs/js/logger.js
index 15427a1..7cba83d 100644
--- a/docs/js/logger.js
+++ b/docs/js/logger.js
@@ -11,7 +11,7 @@ var logger;
return function(text) {
var count = $('p', $el).length,
$content = $('.logger--content', $el);
- $content.append('' + count++ + '. ' + text + '
').scrollTop(100000)
+ $content.append('' + ++count + '. ' + text + '
').scrollTop(100000)
}
};