Présentation
PBB DatePicker est une class javascript accessible et "unobtrusive" qui permet d'ajouter facilement un "DatePicker" (en forme de calendrier) à vos formulaires. Cette class est une compilation de plusieurs "DatePickers" que j'ai épurée, améliorée et ré-écrite pour Mootools 1.2.
J'ai essayé d'y inclure les fonctionnalités qui me paraissaient les plus utiles sans en faire une usine à gaze.
Fonctionnalités
- Apparence du calendrier facilement modifiable grâce aux CSS et sa structure XHTML
- Format de la date entièrement configurable similaire à la fonction date en PHP
- Langue des jours de la semaine et des mois configurable
- Navigation au clic et à la molette par Mois et Années
- Détection automatique du focus
Démonstration
PBB DatePicker Demo
Téléchargement
Requis
PBB DatePicker a été testé avec Firefox, Safari, Opera et Internet Explorer. Mootools 1.2 est nécessaire pour fonctionner.
Liens
Vous êtes en train de télécharger PBB DatePicker 1.0 Beta.
Documentation
La documentation est volontairement en anglais pour une meilleure compréhension de tous et un meilleurs support.
Arguments:
- elements - (mixed: optional) A collection of elements, a string Selector, or an Element to apply the datepickers to.
- options - (object) An object to customize this PBBDatePickers instance.
Options:
- showDelay - (number: defaults to 100) The delay the show event is fired.
- hideDelay - (number: defaults to 100) The delay the hide hide is fired.
- className - (string: defaults to null) The className your datepicker container will get. Useful for extreme styling.
- The datepicker element inside the datepicker container above will have 'datepicker' as classname.
- offsets - (object: defaults to {'x': 0, 'y': 20}) The distance of your datepicker from the input.
- dateformat - (string: defaults to 'd/m/Y') The format of your date like PHP Date function.
- days - (array: defaults to 'Dimanche', 'Lundi', 'Mardi', 'Merc...) All days of the week starting at sunday.
- months - (array: defaults to 'Janvier', 'Février', 'Mars', 'Avr...) All months of the years.
- weekFirstDay - (number: defaults to 1... yeah i'm french ^^) First day of the week: 0 = sunday, 1 = monday, etc..
Events:
- show : fires when the datepicker is shown
- hide : fires when the datepicker is being hidden
Exemple:
HTML
<input id="date1" name="date1" type="text" class="thisisadatepicker" />
JavaScript
var myDatepickers = new PBBDatePickers('.thisisadatepicker');
DatePickers Event: show
- (function) Fires when the DatePicker is starting to show and by default sets the datepicker visible.
Signature:
onShow(datepicker)
Arguments:
- datepicker - (element) The datepicker element. Useful if you want to apply effects to it.
Example:
myDatepickers.addEvent('show', function(datepicker){
datepicker.fade('in');
});
DatePickers Event: hide
- (function) Fires when the DatePicker is starting to hide and by default sets the datepicker hidden.
Signature:
onHide(datepicker)
Arguments:
- datepicker - (element) The datepicker element. Useful if you want to apply effects to it.
Example:
myDatepickers.addEvent('hide', function(datepicker){
datepicker.fade('out');
});
DatePickers Method: attach
Attaches datepickers to elements. Useful to add more elements to a datepickers instance.
Syntax:
myDatepickers.attach(elements);
Arguments:
- elements - (mixed) A collection of elements, a string Selector, or an Element to apply the datepickers to.
Returns:
- (object) This PBBDatePickers instance.
Example:
myDatepickers.attach('input.thisisadatepicker');
DatePickers Method: detach
Detaches datepickers from elements. Useful to remove elements from a datepickers instance.
Syntax:
myDatepickers.detach(elements);
Arguments:
- elements - (mixed) A collection of elements, a string Selector, or an Element to apply the datepickers to.
Returns:
- (object) This PBBDatePickers instance.
Example:
myDatepickers.detach('input.thisisadatepicker');
PBBDatePickers HTML Structure
<div class="options.className"> //the className you pass in options will be assigned here.
<div class="datepicker-top"></div> //useful for styling
<div class="datepicker">
<table>
<caption>
<span class="month">
<a class="prev"><</a>
<span>[Month]</span>
<a class="next">></a>
</span>
<span class="year">
<a class="prev"><</a>
<span>[Year]</span>
<a class="next">></a>
</span>
</caption>
<thead>
<tr>
<th>S</th>
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
</tr>
</thead>
<tbody>
<tr>
<td>30</td>
<td>31</td>
<td class="active">1</td>
<td class="inactive">2</td>
<td class="today">3</td>
<td class="hilite">4</td>
<td>5</td>
</tr>
<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
</tbody>
</table>
</div>
<div class="datepicker-bottom"></div> //useful for styling
</div>
DatePickers with date format
You can also assign inputs date format with the "accept" attribut for each differents inputs
Exemple:
HTML
<input id="date2" name="date2" type="text" class="thisisadatepicker" accept="m/d/Y" />
