Date - GeekPress/WP-Custom-Fields GitHub Wiki

Le champ Date permet de sélectionner une date à l'aide d'un DatePicker. Par défaut, il s'agit d'un champ Text auquel on ajoute le plugin DatePicker de jQuery UI :

Pour créer ce champ, il faut assigner un array à la variable $fields avec la valeur 'date' à la clé 'type' comme ci-dessous :

<?php
$fields[] = array(
                'name'      => '_date_reservation', // Attribut "name" de la balise "input" - il doit être unique
                'label'     => 'Date de la réservation', // Balise "label" du champ
                'type'      => 'date' // Permet de créer un champ avec un DatePicker
);
?>

Dans certains cas, il peut être utile d'ajouter plusieurs mois dans le DatePicker afin d'aider l'utilisateur dans le choix de sa date :

Pour cela, il faut ajouter la clé 'number_of_months' et sa valeur dans l'array assigné à la variable $fields comme ci-dessous :

<?php
$fields[] = array(
                'name'      => '_date_reservation', // Attribut "name" de la balise "input" - il doit être unique
                'label'     => 'Date de la réservation', // Balise "label" du champ
                'type'      => 'date', // Permet de créer un champ avec un DatePicker
                'number_of_months' => 3 // Permet d'afficher 3 mois sur le DatePicker
);
?>

• number_of_months : 1

Pour faciliter la navigation au sein du DatePicker, il est possible d'afficher le mois et l'année dans une liste déroulante :

Pour cela, il faut ajouter les clés 'change_month' et 'change_year' avec une valeur à true dans l'array assigné à la variable $fields comme ci-dessous :

<?php
$fields[] = array(
                'name'         => '_date_reservation', // Attribut "name" de la balise "input" - il doit être unique
                'label'        => 'Date de la réservation', // Balise "label" du champ
                'type'         => 'date', // Permet de créer un champ avec un DatePicker
                'change_month' => true, // Permet de transformer le mois en liste déroulante
                'change_year'  => true // Permet de transformer l'année en liste déroulante
);
?>

Grâce au type date de HTML5, l'élément <input> devient un DatePicker intégré. En fonction du navigateur, le style et le calendrier peuvent être différents.

Par exemple, sous Chrome, le champ de saisie est transformé un style de liste déroulante et le calendrier apparait lorsque l'on clique dessus :

Pour cela, il faut ajouter la clé 'html5' et la valeur true dans l'array assigné à la variable $fields comme ci-dessous :

<?php
$fields[] = array(
                'name'      => '_date_reservation', // Attribut "name" de la balise "input" - il doit être unique
                'label'     => 'Date de la réservation', // Balise "label" du champ
                'type'      => 'date', // Permet de créer un champ avec un DatePicker
                'html5'	    => true // Force l'utilisation d'un input HTML5 de type="date"
);
?>

• Chrome >= 21
• Opéra >= 11.62

Si le navigateur ne supporte pas le type date, le DatePicker de jQuery UI sera utilisé pour afficher le calendrier.

Pour être certain que l'utilisateur précise une date, le validateur date est ajouté par défaut lors de la création d'un champ Date. Si la valeur ne correspond pas à une date, un message de prévention sera affiché à côté du champ :

Par défaut, le validateur autorise les formats de date suivants :

• DD/MM/YYYY | DD-MM-YYYY | DD.MM.YYYY
• DD/MM/YY | DD-MM-YY | DD.MM.YY
• YYYY/MM/DD | YYYY-MM-DD | YYYY.MM.DD
• YY/MM/DD | YY-MM-DD | YY.MM.DD