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

Sélectionnez facilement une date parmi les 3 exemples ci-dessous.

Sélectionner une date (par defaut) :

Sélectionner une date ( »value » déjà rempli) :

Sélectionner une date (formatage de la date) :

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', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']) All days of the week starting at sunday.
• months – (array: defaults to ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']) 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:

<input id="date1" name="date1" type="text" class="thisisadatepicker" />

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">&lt;</a>
            <span>[Month]</span>
            <a class="next">&gt;</a>
          </span>
          <span class="year">
            <a class="prev">&lt;</a>
            <span>[Year]</span>
            <a class="next">&gt;</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

Example:

<input id="date2" name="date2" type="text" class="thisisadatepicker" accept="m/d/Y" />

Téléchargement

PBB DatePicker a été testé avec Firefox, Safari, Opera et Internet Explorer. Mootools 1.2 est nécessaire pour fonctionner.

• Mootools 1.2
• PBB DatePicker 1.0 beta