Présentation de l'élément

(publié le 03/03/2015)

Zend\Form\Element\Time permet de créer grâce à l'aide de vue Zend\Form\View\Helper\FormTime une balise <input type="time">  en HTML5. Cet élément ajoute les filtres et validateurs conformes aux spécifications HTML5 de ce type.

Utilisation

L'exemple de la documentation de ZF2 ne fonctionne pas. En effet, il faut rendre compatible les formats des données avec le pas spécifié dans l'attribut step. En particulier, si step = 60, le contrôle de saisie dans un navigateur ne présentera que les heures et les minutes. Aussi, il faut que le format indiqué soit 'H:i' et que les attributs min et max soient aussi de même format.

Voici donc quelques exemples qui doivent fonctionner :

Pour step=60

use Zend\Form\Form;

$form = new Form('my-form');
$form->add(array(
     'type' => 'Zend\Form\Element\Time',
     'name' => 'time',
     'options' => array(
             'label' => 'Time',
             'format' => 'H:i'
     ),
     'attributes' => array(
             'min' => '00:00',
             'max' => '23:59',
             'step' => '60', // pas de 1 minute ; on ne voit pas les secondes.
     )

Pour step=30

use Zend\Form\Form;

$form = new Form('my-form');
$form->add(array(
     'type' => 'Zend\Form\Element\Time',
     'name' => 'time',
     'options' => array(
             'label' => 'Time',
             'format' => 'H:i:s'
     ),
     'attributes' => array(
             'min' => '00:00:00',
             'max' => '23:59:00',
             'step' => '30', // pas de 30 secondes ; on voit les secondes
     )

Problème avec cet élément

(ajout du 22/04/2021)

Le comportement des navigateurs sur cet élément <input type="time"> varie d'un navigateur à un autre. Ainsi, un temps de 00:01:00 sera reçu correctement sous Firefox ou Safari mais pas sous Chrome, Edge ou Opera qui reçoivent 00:01 en POST.

Aussi, dans ce cas, le validateur de l'élément Zend\Form\Element\Time renvoie une erreur du type INVALID_DATE avec le message The input does not appear to be a valid date ou, en français, L'entrée ne semble pas être une date valide. Il convient donc de vérifier le contenu du POST avant de le soumettre au validateur.

A noter que ce problème ne se produit que lorsque le nombre de secondes est 00. Il n'y a pas de problème lorsque le nombre de secondes n'est pas nul.

Correction du problème

On pourra surcharger la méthode setData() du formulaire de la façon suivante :

/**
 * Correction du format du temps renvoyé par certains navigateurs sans les
 * secondes lorsque la partie secondes est 00 
 * pour un <input type='time' name='temps'>
 *
 * {@inheritdoc}
 * @see \Zend\Form\Form::setData()
 */
public function setData($data)
{
    if (is_array($data) && array_key_exists('temps', $data) {
        $temps = $data['temps'];
        if (is_string($temps) &&
            ! (\DateTime::createFromFormat('H:i:s', $temps) instanceof \DateTime)) {
            $dt = \DateTime::createFromFormat('H:i', $temps);
            if ($dt instanceof \DateTime) {
                $data['temps'] = $dt->format('H:i:s');
            }
        }
    }
    return parent::setData($data);
}