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
})

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"/>

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;

			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.

Example

var eventDates = [1, 10, 12, 22],
	$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)
	}
})

// Select initial date from `eventDates`
var currentDate = currentDate = new Date();
$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))