# jQuery.asDatepicker

## Examples

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

### 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,2012,2014>2016">
    <script>
    $(document).ready(function(){
      $("#calendar4").asDatepicker();
    });
    <script>

### Mobile Single

    <input type="text" id="calendar-mobile-single">
    <script>
    $(document).ready(function(){
      $('#calendar-mobile-single').asDatepicker({
         mobileMode: true
      });
    });
    <script>

### Mobile Range

    <input type="text" id="calendar-mobile-range">
    <script>
    $(document).ready(function(){
      $('#calendar-mobile-range').asDatepicker({
         mode: 'range',
         mobileMode: true
      });
    });
    <script>

### Mobile Multiple

    <input type="text" id="calendar-mobile-multiple">
    <script>
    $(document).ready(function(){
      $('#calendar-mobile-multiple').asDatepicker({
         mode: 'multiple',
         mobileMode: true
      });
    });
    <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