jQuery asDatepicker Examples

default single


<input type="text" id="calendar">
<script>
$(document).ready(function(){
  $("#calendar").asDatepicker();
});
<script>

range


<input type="text" id="calendar2">
<script>
$(document).ready(function(){
  $("#calendar2").asDatepicker({mode: 'range'});
});
<script>

multiple


<input type="text" id="calendar3">
<script>
$(document).ready(function(){
  $("#calendar3").asDatepicker({mode: 'multiple', calendars: '4'});
});
<script>

Data attributes

Any option of the asDatepicker can also be set via data-attributes.

Such as:


<input type="text" id="calendar4" data-mode="range" data-range-mode="section" data-selectable-year="2001>2010,2013,2015>2018">
<script>
$(document).ready(function(){
  $("#calendar4").asDatepicker();
});
<script>

Keyboard navigation

left arrow ----- highlights previous day

right arrow ----- highlights next day

up arrow ----- highlights same day from the previous week

down arrow ----- highlights same day from the next week

ctrl + left arrow ----- navigates to previous month

ctrl + right arrow ----- navigates to next month

ctrl + up arrow ----- navigates to higher view

ctrl + down arrow ----- navigates to lower view

alt + left arrow ----- focus in previous calendar

alt + right arrow ----- focus in next calendar

enter ----- if in "days" view selects the highlighted day. In other views navigates to a lower view

esc ----- closes the popup

Available options

You can pass these options as key/value object to $.asDatepicker() method.

API

DisplayMode

With default dropdown and inline


$("#calendar-api-displayMode").asDatepicker({displayMode: 'inline'});

show()


$('#calendar-api-show').asDatepicker('show');
Click to show calendar

hide()


$('#calendar-api-show').asDatepicker('hide');
Click to hide calendar

multipleClear()


$('#calendar-api-multipleClear').asDatepicker('multipleClear');

getWrap()


$.asDatepicker('getWrap');

Returns the wrapper of the calendar.

getInput()


$.asDatepicker('getInput');
Returns the input field.

getDate()


$('#calendar-api-getDate').asDatepicker('getDate');

Returns the currently selected date.

getDate(format)


$('#calendar-api-getDate-format').asDatepicker('getDate', 'yyyy-mm-dd');

Returns the current date, formatted with the pattern given as the argument.

update()


$('#calendar-api-update').asDatepicker();
$('#calendar-api-update').asDatepicker('update', {mode: 'range'});

Sets one or more options for the asDatepicker.

Events

on_show

on_before_show

on_hide

on_change

on_render

Skin

Location