<commit_before># ab-datepicker 
ab-datepicker is an accessible datepicker based on the example of the Open AJAX Alliance Accessibility Tools Task Force : [http://www.oaa-accessibility.org/examplep/datepicker1/](http://www.oaa-accessibility.org/examplep/datepicker1/)
and Inspired by [http://wet-boew.github.io/wet-boew/demos/datepicker/datepicker-en.html](http://wet-boew.github.io/wet-boew/demos/datepicker/datepicker-en.html)

## Table of contents
1. [Description](#description)
1. [Dependencies](#dependencies)
1. [Demo](#demo)
1. [Usage](#usage)
1. [Configuration options](#configuration-options)
1. [Methods](#methods)
1. [Events](#events)
1. [Theming](#theming)
1. [Keyboard interaction](#keyboard-interaction)
1. [ARIA 1.0 Markup](#aria-10-markup)
1. [Browser Compatibility](#browser-compatibility)
1. [Copyright and license](#copyright-and-license)

##  Description
This DatePicker widget is a jQuery Plugin which allows the user to select a date. It implements the [WAI-ARIA Date Picker design pattern](http://www.w3.org/TR/wai-aria-practices/#datepicker) of W3C. 
	
The calendar portion of the date picker follows a table structure 
where days of the week and calendar day numbers are layed out in HTML table cells where WAI-ARIA semantics for a grid are applied. 
This provides context so an assistive technology can render the day of the week; 
its corresponding numeric calendar day, and week number if necessary. 

The calendar portion can be displayed in a numbers of ways, including as a popup in modal mode.

**[&uparrow; back to table of contents](#table-of-contents)**

## Dependencies
* [jQuery](https://jquery.com/)
* [Bootstrap](http://getbootstrap.com/)

**[&uparrow; back to table of contents](#table-of-contents)**

## Demo
[Online Demo](http://eureka2.github.io/ab-datepicker/)

**[&uparrow; back to table of contents](#table-of-contents)**

## Usage

The datepicker component must be bound to an text input field of your document:
```html
<input class="date form-control" id="date1" type="text" placeholder="d/M/y" title="format: dd/MM/y"/>
```
For better accessibility, define an placeholder attribute and a title giving the input format to the screen reader.

Add the bootstrap and datepicker css to your page head
```html
<link rel="stylesheet" href="path/to/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="path/to/datepicker.css" type="text/css" />
```

Place the javascript files to the end of your document:
```html
<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script type="text/javascript" src="path/to/bootstrap.min.js"></script>
<script type="text/javascript" src="path/to/datepicker.min.js"></script>
```

### Basic usage
Add this code to the end of your document:
```javascript
    <script type="text/javascript">
    $(document).ready(function() {
    	$('.date').datepicker();	
    });
    </script>
```
This code displays the default calendar (in english with the default theme : no colors)
![](https://eureka2.github.io/ab-datepicker/datepicker1.png) ![](https://eureka2.github.io/ab-datepicker/datepicker2.png)   ![](https://eureka2.github.io/ab-datepicker/datepicker3.png)

### Advanced usage including Internationalization
First, place your "locales" file before "datepicker.min.js"
For example, if your language is French, add this line :
```html
<script type="text/javascript" src="path/to/locales/fr.min.js"></script>
```
and give some options to the datepicker. See [Configuration options](#configuration-options) below.
```javascript
    <script type="text/javascript">
    $(document).ready(function() {
    	$('.date').datepicker({
			firstDayOfWeek: 1, // The first day of week is Monday
			weekDayFormat: 'narrow', // Only first letter for the weekday names
			inputFormat: 'd/M/y',
			outputFormat: 'dd/MM/y',
			titleFormat: 'EEEE d MMMM y',
			theme: 'blue',
			modal: false
		});	
    });
    </script>
```
![](https://eureka2.github.io/ab-datepicker/datepicker4.png) ![](https://eureka2.github.io/ab-datepicker/datepicker5.png)

**[&uparrow; back to table of contents](#table-of-contents)**

## Configuration options

|Option                |Description                          |Default        |Example|
|----------------------|-------------------------------------|---------------|-------|
|min                   |The minimum/earliest date that can be selected|null|min: '08/11/2015' |
|max                   |The maximum/latest date that can be selected|null|max: '06/12/2016' |
|firstDayOfWeek        |Determines the first column of the calendar grid<br>0 = Sunday, 1 = Monday, ....|Date.dp_locales.firstday_of_week (*)|firstDayOfWeek: 1 |
|daysOfWeekDisabled    |Array of the week days number to disable|[]|daysOfWeekDisabled: [0, 6]|
|weekDayFormat         |Display format of the weekday names<br>- values are 'short' (first letter) or 'narrow' (first two letters)|short|weekDayFormat: 'narrow'|
|inputFormat           |date input format by the user. Dates and times are formatted according to [CLDR Date Time patterns](http://cldr.unicode.org/translation/date-time)|Date.dp_locales.short_format (*)|inputFormat: 'd/M/y'|
|outputFormat          |date output format of the datepicker.  Dates and times are formatted according to [CLDR Date Time patterns](http://cldr.unicode.org/translation/date-time)|Date.dp_locales.short_format (*)|outputFormat: 'dd/MM/y'|
|titleFormat           |Dates and times are formatted according to [CLDR Date Time patterns](http://cldr.unicode.org/translation/date-time)|Date.dp_locales.full_format (*)|titleFormat: 'EEEE d MMMM y'|
|buttonTitle           |Title attribute for the calendar button|Date.dp_locales.texts.buttonTitle (*)|Sélectionner une date ...|
|buttonLabel           |Accessibility label : 'aria-labelledby' attribute for the calendar button|Date.dp_locales.texts.buttonLabel (*)|Cliquez ou appuyez sur la touche Entrée ou la barre d'espace pour ouvrir le calendrier|
|prevButtonLabel       |Accessibility label : 'aria-labelledby' attribute for the previous month button|Date.dp_locales.texts.prevButtonLabel (*)|prevButtonLabel: "Aller au mois précédent"|
|prevMonthButtonLabel  |Accessibility label : 'aria-labelledby' attribute for the previous year button|Date.dp_locales.texts.prevMonthButtonLabel (*)|prevMonthButtonLabel: "Aller à l'année précédente"|
|prevYearButtonLabel   |Accessibility label : 'aria-labelledby' attribute for the previous years range button|Date.dp_locales.texts.prevYearButtonLabel (*)|prevYearButtonLabel: "Aller aux vingt années précédentes"|
|nextButtonLabel       |Accessibility label : 'aria-labelledby' attribute for the next month button|Date.dp_locales.texts.nextButtonLabel (*)|nextButtonLabel: "Aller au mois suivant"|
|nextMonthButtonLabel  |Accessibility label : 'aria-labelledby' attribute for the next year button|Date.dp_locales.texts.nextMonthButtonLabel (*)|nextMonthButtonLabel: "Aller à l'année suivante"|
|nextYearButtonLabel   |Accessibility label : 'aria-labelledby' attribute for the next years range button|Date.dp_locales.texts.nextYearButtonLabel (*)|nextYearButtonLabel: "Allez aux vingt années suivantes"|
|changeMonthButtonLabel|Accessibility label : title attribute for the calendar title when the current month is displayed|Date.dp_locales.texts.changeMonthButtonLabel (*)|changeMonthButtonLabel: "Cliquez ou appuyez sur la touche Entrée ou la barre d'espace pour changer le mois"|
|changeYearButtonLabel |Accessibility label : title attribute for the calendar title when the current year is displayed|Date.dp_locales.texts.changeYearButtonLabel (*)|changeYearButtonLabel: "Cliquez ou appuyez sur la touche Entrée ou la barre d'espace pour changer l'année"|
|changeRangeButtonLabel|Accessibility label : title attribute for the calendar title when the current years range is displayed|Date.dp_locales.texts.changeRangeButtonLabel (*)|changeRangeButtonLabel: "Cliquez ou appuyez sur la touche ou sur la barre Entrée pour afficher les vingt années suivantes"|
|closeButtonTitle      |Title attribute for the close button when the calendar is displayed in modal mode|Date.dp_locales.texts.closeButtonTitle (*)|closeButtonTitle: "Fermer"|
|closeButtonLabel      |Accessibility label : 'aria-labelledby' attribute for the close button when the calendar is displayed in modal mode|Date.dp_locales.texts.closeButtonLabel (*)|closeButtonLabel: "Fermez le calendrier"|
|onUpdate              |A function that is called when the input box has been updated by the datepicker|function (value) {}|function (value) { console.log("date updated : " + value); }
|theme                 |name of the theme|default|theme: 'green'|
|modal                 |Indicates if the calendar must be opened in modal mode, that is it keeps the focus until the user selects a date or clicks the close button|false|modal: true|
|inline                |Display the datepicker inline inside a given div|false|inline: $('#inline-div')|

(*) Default value from the locale file

**[&uparrow; back to table of contents](#table-of-contents)**

## Methods
### min
```javascript
$('your date selector').datepicker('min', date);	
```
Define the smallest date the user can enter. The value of "date" (type: string) must conform to one of the formats defined with the "inputFormat" option.
### max
```javascript
$('your date selector').datepicker('max', date);	
```
Define the biggest date the user can enter. The value of "date" (type: string) must conform to one of the formats defined with the "inputFormat" option
### show
```javascript
$('your date selector').datepicker('show');	
```
show the calendar portion of the datepicker
### hide
```javascript
$('your date selector').datepicker('hide');	<commit_msg>update readme with new methods<commit_after># ab-datepicker 
ab-datepicker is an accessible datepicker based on the example of the Open AJAX Alliance Accessibility Tools Task Force : [http://www.oaa-accessibility.org/examplep/datepicker1/](http://www.oaa-accessibility.org/examplep/datepicker1/)
and Inspired by [http://wet-boew.github.io/wet-boew/demos/datepicker/datepicker-en.html](http://wet-boew.github.io/wet-boew/demos/datepicker/datepicker-en.html)

## Table of contents
1. [Description](#description)
1. [Dependencies](#dependencies)
1. [Demo](#demo)
1. [Usage](#usage)
1. [Configuration options](#configuration-options)
1. [Methods](#methods)
1. [Events](#events)
1. [Theming](#theming)
1. [Keyboard interaction](#keyboard-interaction)
1. [ARIA 1.0 Markup](#aria-10-markup)
1. [Browser Compatibility](#browser-compatibility)
1. [Copyright and license](#copyright-and-license)

##  Description
This DatePicker widget is a jQuery Plugin which allows the user to select a date. It implements the [WAI-ARIA Date Picker design pattern](http://www.w3.org/TR/wai-aria-practices/#datepicker) of W3C. 
	
The calendar portion of the date picker follows a table structure 
where days of the week and calendar day numbers are layed out in HTML table cells where WAI-ARIA semantics for a grid are applied. 
This provides context so an assistive technology can render the day of the week; 
its corresponding numeric calendar day, and week number if necessary. 

The calendar portion can be displayed in a numbers of ways, including as a popup in modal mode.

**[&uparrow; back to table of contents](#table-of-contents)**

## Dependencies
* [jQuery](https://jquery.com/)
* [Bootstrap](http://getbootstrap.com/)

**[&uparrow; back to table of contents](#table-of-contents)**

## Demo
[Online Demo](http://eureka2.github.io/ab-datepicker/)

**[&uparrow; back to table of contents](#table-of-contents)**

## Usage

The datepicker component must be bound to an text input field of your document:
```html
<input class="date form-control" id="date1" type="text" placeholder="d/M/y" title="format: dd/MM/y"/>
```
For better accessibility, define an placeholder attribute and a title giving the input format to the screen reader.

Add the bootstrap and datepicker css to your page head
```html
<link rel="stylesheet" href="path/to/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="path/to/datepicker.css" type="text/css" />
```

Place the javascript files to the end of your document:
```html
<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script type="text/javascript" src="path/to/bootstrap.min.js"></script>
<script type="text/javascript" src="path/to/datepicker.min.js"></script>
```

### Basic usage
Add this code to the end of your document:
```javascript
    <script type="text/javascript">
    $(document).ready(function() {
    	$('.date').datepicker();	
    });
    </script>
```
This code displays the default calendar (in english with the default theme : no colors)
![](https://eureka2.github.io/ab-datepicker/datepicker1.png) ![](https://eureka2.github.io/ab-datepicker/datepicker2.png)   ![](https://eureka2.github.io/ab-datepicker/datepicker3.png)

### Advanced usage including Internationalization
First, place your "locales" file before "datepicker.min.js"
For example, if your language is French, add this line :
```html
<script type="text/javascript" src="path/to/locales/fr.min.js"></script>
```
and give some options to the datepicker. See [Configuration options](#configuration-options) below.
```javascript
    <script type="text/javascript">
    $(document).ready(function() {
    	$('.date').datepicker({
			firstDayOfWeek: 1, // The first day of week is Monday
			weekDayFormat: 'narrow', // Only first letter for the weekday names
			inputFormat: 'd/M/y',
			outputFormat: 'dd/MM/y',
			titleFormat: 'EEEE d MMMM y',
			theme: 'blue',
			modal: false
		});	
    });
    </script>
```
![](https://eureka2.github.io/ab-datepicker/datepicker4.png) ![](https://eureka2.github.io/ab-datepicker/datepicker5.png)

**[&uparrow; back to table of contents](#table-of-contents)**

## Configuration options

|Option                |Description                          |Default        |Example|
|----------------------|-------------------------------------|---------------|-------|
|min                   |The minimum/earliest date that can be selected|null|min: '08/11/2015' |
|max                   |The maximum/latest date that can be selected|null|max: '06/12/2016' |
|firstDayOfWeek        |Determines the first column of the calendar grid<br>0 = Sunday, 1 = Monday, ....|Date.dp_locales.firstday_of_week (*)|firstDayOfWeek: 1 |
|daysOfWeekDisabled    |Array of the week days number to disable|[]|daysOfWeekDisabled: [0, 6]|
|weekDayFormat         |Display format of the weekday names<br>- values are 'short' (first letter) or 'narrow' (first two letters)|short|weekDayFormat: 'narrow'|
|inputFormat           |date input format by the user. Dates and times are formatted according to [CLDR Date Time patterns](http://cldr.unicode.org/translation/date-time)|Date.dp_locales.short_format (*)|inputFormat: 'd/M/y'|
|outputFormat          |date output format of the datepicker.  Dates and times are formatted according to [CLDR Date Time patterns](http://cldr.unicode.org/translation/date-time)|Date.dp_locales.short_format (*)|outputFormat: 'dd/MM/y'|
|titleFormat           |Dates and times are formatted according to [CLDR Date Time patterns](http://cldr.unicode.org/translation/date-time)|Date.dp_locales.full_format (*)|titleFormat: 'EEEE d MMMM y'|
|buttonTitle           |Title attribute for the calendar button|Date.dp_locales.texts.buttonTitle (*)|Sélectionner une date ...|
|buttonLabel           |Accessibility label : 'aria-labelledby' attribute for the calendar button|Date.dp_locales.texts.buttonLabel (*)|Cliquez ou appuyez sur la touche Entrée ou la barre d'espace pour ouvrir le calendrier|
|prevButtonLabel       |Accessibility label : 'aria-labelledby' attribute for the previous month button|Date.dp_locales.texts.prevButtonLabel (*)|prevButtonLabel: "Aller au mois précédent"|
|prevMonthButtonLabel  |Accessibility label : 'aria-labelledby' attribute for the previous year button|Date.dp_locales.texts.prevMonthButtonLabel (*)|prevMonthButtonLabel: "Aller à l'année précédente"|
|prevYearButtonLabel   |Accessibility label : 'aria-labelledby' attribute for the previous years range button|Date.dp_locales.texts.prevYearButtonLabel (*)|prevYearButtonLabel: "Aller aux vingt années précédentes"|
|nextButtonLabel       |Accessibility label : 'aria-labelledby' attribute for the next month button|Date.dp_locales.texts.nextButtonLabel (*)|nextButtonLabel: "Aller au mois suivant"|
|nextMonthButtonLabel  |Accessibility label : 'aria-labelledby' attribute for the next year button|Date.dp_locales.texts.nextMonthButtonLabel (*)|nextMonthButtonLabel: "Aller à l'année suivante"|
|nextYearButtonLabel   |Accessibility label : 'aria-labelledby' attribute for the next years range button|Date.dp_locales.texts.nextYearButtonLabel (*)|nextYearButtonLabel: "Allez aux vingt années suivantes"|
|changeMonthButtonLabel|Accessibility label : title attribute for the calendar title when the current month is displayed|Date.dp_locales.texts.changeMonthButtonLabel (*)|changeMonthButtonLabel: "Cliquez ou appuyez sur la touche Entrée ou la barre d'espace pour changer le mois"|
|changeYearButtonLabel |Accessibility label : title attribute for the calendar title when the current year is displayed|Date.dp_locales.texts.changeYearButtonLabel (*)|changeYearButtonLabel: "Cliquez ou appuyez sur la touche Entrée ou la barre d'espace pour changer l'année"|
|changeRangeButtonLabel|Accessibility label : title attribute for the calendar title when the current years range is displayed|Date.dp_locales.texts.changeRangeButtonLabel (*)|changeRangeButtonLabel: "Cliquez ou appuyez sur la touche ou sur la barre Entrée pour afficher les vingt années suivantes"|
|closeButtonTitle      |Title attribute for the close button when the calendar is displayed in modal mode|Date.dp_locales.texts.closeButtonTitle (*)|closeButtonTitle: "Fermer"|
|closeButtonLabel      |Accessibility label : 'aria-labelledby' attribute for the close button when the calendar is displayed in modal mode|Date.dp_locales.texts.closeButtonLabel (*)|closeButtonLabel: "Fermez le calendrier"|
|onUpdate              |A function that is called when the input box has been updated by the datepicker|function (value) {}|function (value) { console.log("date updated : " + value); }
|theme                 |name of the theme|default|theme: 'green'|
|modal                 |Indicates if the calendar must be opened in modal mode, that is it keeps the focus until the user selects a date or clicks the close button|false|modal: true|
|inline                |Display the datepicker inline inside a given div|false|inline: $('#inline-div')|

(*) Default value from the locale file

**[&uparrow; back to table of contents](#table-of-contents)**

## Methods
### getDate
```javascript
$('your date selector').datepicker('getDate');
```
### setDate
```javascript
$('your date selector').datepicker('setDate', new Date());
```
### min
```javascript
$('your date selector').datepicker('min', date);	
```
Define the smallest date the user can enter. The value of "date" (type: string) must conform to one of the formats defined with the "inputFormat" option.
### max
```javascript
$('your date selector').datepicker('max', date);	
```
Define the biggest date the user can enter. The value of "date" (type: string) must conform to one of the formats defined with the "inputFormat" option
### show
```javascript
$('your date selector').datepicker('show');	
```
show the calendar portion of the datepicker
### hide
```javascript
$('your date selector').datepicker('hide');	
{'fraction_non_alphanumeric': 0.12906030999028084, 'fraction_numerical': 0.005524579262366361, 'mean_word_length': 4.6388808768387655, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 37, 'https://': 12, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3969764', 'n_tokens_mistral': 5853, 'n_tokens_neox': 5524, 'n_words': 1870}