Ergonomie d’un datepicker (Pikaday)

Toujours sur le même projet de site; aujourd’hui je vais vous parler de datepicker (mmmh, comment dire ??… sélectionneur de date, ouhais, on va dire cela !).

Donc, j’ai choisi pour le projet un datepicker légé, simple et sobre, je suis donc tombé sur Pikaday. Même les couleurs par défaut de l’outil me conviennent.

Après un peu d’utilisation, une collègue (pratiquant peu l’informatique) s’est servi du formulaire et donc de l’outil en question. Elle a rencontré un souci au niveau de la saisie de date. Au deux premiers message, je n’ai pas tout compris. Au second, j’ai testé pour moi tout allait bien. Un peu plus tard on reparle de ce souci et on le fait ensemble via video-conférence.

En fait Pikaday fonctionne très bien  comme à peut près 95% des datepickers. Seulement dans notre situation nous devons saisir des dates antérieures et faisant appel à notre mémoire (ce qui est tout de même très récurant) :

• Elle sélectionne d’abord le jour et le mois (exemple : 5 avril)
• voyant qu’elle a sélectionné le 5/04/2014 retourne sur le champ date
• Pikaday s’ouvre et elle sélectionne l’année en question (exemple : 2012)
• puis clic en dehors de la zone (logique, pourquoi aurait elle besoin de sélectionner deux fois le jour ?).

Ce qui a pour effet de n’avoir pas du tout changé la date car il aurait fallu qu’elle re-sélectionne le jour (5).

Si elle n’avait pas fait attention, nous aurions pas mal de formulaire à contrôler. Le fonctionnement de cette collègue n’est pas isolé et pour résoudre ce problème qui risque de compromettre plusieurs de nos questionnaires, nous allons tenter d’ajouter du script pour attraper l’événement du select du mois et de l’année.

Dans cette vidéo le champ « start date » nous montre le problème et dans le champ « end date » le script est appliqué.

HTML

[pastacode lang= »markup » message= »HTML pour Pikaday » highlight= » » provider= »manual »]

<style>
    div.pika-label:hover{
    color:#ff9705;
}
</style>
<input type="text" name="start_date" id="start_date">
<input type="text" name="end_date"   id="end_date"  >

[/pastacode]

Javascript

[pastacode lang= »javascript » message= »Javascript ^pour Pikaday avec script onChange » highlight= » » provider= »manual »]

var start_date = new Pikaday({
	format: 'DD / MM / YYYY',
    field: document.getElementById('start_date'),
    onSelect: function() {
        end_date.setMinDate(this.getDate());
    }
});
var end_date = new Pikaday({
	format: 'DD / MM / YYYY',
    field: document.getElementById('end_date'),
    onSelect: function() {
        start_date.setMaxDate(this.getDate());
    }
});

jQuery(document).on('change', '.pika-select-month', function() {
    pika_modif_date('month', this.value);
});

jQuery(document).on('change', '.pika-select-year', function() {
	pika_modif_date('year', this.value);
});


function pika_modif_date(type, value_change){
	var pik_obj;
    // identifying object
    if( start_date.isVisible() ){
        pik_obj = 'start_date';
    }
    else{
        pik_obj = 'end_date';
    }
    var actual_date;
    // Date of the object
    eval('actual_date = '+pik_obj+'.getDate();');
    // If date not exist
    if (actual_date == null){
        return;
    }
    // Modify month or yeah
    if( 'month' == type ){
		actual_date.setMonth(value_change);
    }
	else{
		actual_date.setFullYear(value_change);
	}
	// Format for set to pikaday
	year = 1900 + actual_date.getYear();
    eval(pik_obj+'.setDate(new Date(' + year +','+ actual_date.getMonth() +','+ actual_date.getDate() +'), 1);');
}

[/pastacode]

D’après vous, quelle est la bonne ergonomie à avoir ?
Ne devrions nous pas repenser la plus-part de nos outils, les smartphone ont déjà donné un bon coup de boost aux l’UI. J’ai pu voir un datepicker qui pour moi est plus ergonomique car donne moins de place aux erreurs : SharpCalendar. Après c’est une question de goût et d’expérience utilisateur.