Why this demo ?

The purpose of this demo is not only allow you to learn about the features of ab-datepicker but also to assist you in its configuration.

Choose the appropriate options to the right of the screen, then check their effects by operating the datepicker control in to the left of the screen.

This demonstrator automatically updates the scripts for you, you will only need to copy/paste them into your HTML page.

Datepicker

:

Scripts : 

<input class="form-control" id="date" type="text" placeholder="" title="format : "/>
......						
<script type="text/javascript" src="js/locales/en.min.js"></script>
<script type="text/javascript" src="js/datepicker.min.js"></script>
							
$(document).ready(function() {
	$('#date').datepicker({
	});
});

Options

: narrow short
:
:

Linked datepickers

:
: 
$('#startdate').datepicker({
	next: '#enddate' // The date in '#startdate' must be before or equal to the date in '#enddate'
});
$('#enddate').datepicker({
	previous: '#startdate' // The date in '#enddate' must be after or equal to the date in '#startdate'
});

Keyboard interaction

  • Left Move focus to the previous day. Will move to the last day of the previous month, if the current day is the first day of a month.
  • Right Move focus to the next day. Will move to the first day of the following month, if the current day is the last day of a month.
  • Up Move focus to the same day of the previous week. Will wrap to the appropriate day in the previous month.
  • Down Move focus to the same day of the following week. Will wrap to the appropriate day in the following month.
  • PgUp Move focus to the same date of the previous month. If that date does not exist, focus is placed on the last day of the month.
  • PgDn Move focus to the same date of the following month. If that date does not exist, focus is placed on the last day of the month.
  • Alt+PgUp Move focus to the same date of the previous year. If that date does not exist (e.g leap year), focus is placed on the last day of the month.
  • Alt+PgDn Move focus to the same date of the following year. If that date does not exist (e.g leap year), focus is placed on the last day of the month.
  • Home Move to the first day of the month.
  • End Move to the last day of the month
  • Tab / Shift+Tab If the datepicker is in modal mode, navigate between calander grid and close/previous/next selection buttons, otherwise move to the field following/preceding the date textbox associated with the datepicker
  • Enter / Space Fill the date textbox with the selected date then close the datepicker widget.

Browser Compatibility

  • osx: Chrome 10.0 (C)
  • osx: Firefox 3.6 (C)
  • osx: Opera 11.0 (C)
  • osx: Safari 5.0 (C)
  • win: Chrome 10.0 (C)
  • win: Firefox 3.6 (C)
  • win: Internet Explorer 8.0 (C)
  • win: Opera 11.0 (C)
  • win: Safari 5.0 (C)