Time - GeekPress/WP-Custom-Fields GitHub Wiki

Le champ Time permet de sélectionner une heure à l'aide d'un TimePicker. Par défaut, il s'agit d'un champ Text auquel on ajoute le plugin TimePicker :

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

<?php
$fields[] = array(
                'name'      => '_time_seance', // Attribut "name" de la balise "input" - il doit être unique
                'label'     => 'Heure de la séance', // Balise "label" du champ
                'type'      => 'time' // Permet de créer un champ avec un TimePicker
);
?>

Ajouter les secondes

Il est possible d'ajouter une gestion des secondes au TimePicker :

Pour cela, il faut modifier le format de l'heure avec la clé 'time_format' et autoriser l'affichage des secondes avec la clé 'show_second' comme ci-dessous :

<?php
$fields[] = array(
                'name'      => '_time_seance', // Attribut "name" de la balise "input" - il doit être unique
                'label'     => 'Heure de la séance', // Balise "label" du champ
                'type'      => 'time', // Permet de créer un champ avec un TimePicker
                'show_second' => true, // On affiche les secondes
                'time_format' => 'hh:mm:ss' // on modifie le format pour gérer les secondes
);
?>

Utiliser le type="time" HTML5

Grâce au type time de HTML5, l'élément <input> devient un TimePicker intégré. Pour le moment, Opéra est le seul navigateur qui offre une compatibilité du type time :

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'      => '_time_seance', // Attribut "name" de la balise "input" - il doit être unique
                'label'     => 'Heure de la séance', // Balise "label" du champ
                'type'      => 'time', // Permet de créer un champ avec un TimePicker
                'html5'	    => true // Force l'utilisation d'un input HTML5 de type="time"
);
?>

Compatibilités navigateurs

  • Opéra >= 11.62

REMARQUE

Si le navigateur ne supporte pas le type time, le plugin TimePicker sera utilisé pour la gestion de l'heure.

Le validateur time

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

REMARQUE

Par défaut, le validateur autorise les formats d'heures suivants :

  • hh:mm
  • hh:mm:ss
  • hh:mm AM | hh:mm PM
  • hh:mm:ss AM | hh:mm:ss PM
⚠️ **GitHub.com Fallback** ⚠️