Laravel : Afficher une date dans un input datetime-local

La version anglaise de cette publication : Laravel : Show a date in a datetime-local input

Un input HTML dont l'attribut type vaut datetime-local permet de présenter un champ de formulaire pour afficher et saisir une date et une heure :

<input type="datetime-local" >

Nous voulons voir dans ce tutoriel comment afficher une date (jour, mois, année, heure, minute et seconde) d'un modèle Laravel dans un input HTML datetime-local. Au moment de la rédaction de ce post, j'utilise la version 10.3.3 de Laravel.

Pour afficher la date (email_verified_at, created_at, updated_at, ...) d'un modèle Laravel dans un champ de formulaire HTML datetime-local, nous devons tout d'abord nous s'assurer que la colonne de la table de base de données est définie avec le type de données timestamp.

Dans une migration Laravel, on utilise la méthode timestamp() pour définir le schéma d'une colonne timestamp :

$table->timestamp('email_verified_at')->nullable(); // colonne email_verified_at
$table->timestamps(); // colonnes created_at et updated_at

Si vous avez une autre colonne qui enregistre la date, vous pouvez convertir son attribut au format de date (instance Carbon) à travers la propriété $casts dans le modèle :

protected $casts = [ "online_at" => "datetime" ];

Dans une vue (template Blade), nous pouvons utiliser la méthode format() pour formater la date et l'heure en une chaîne compatible et utilisable avec le champ datetime-local HTML pour l'afficher.

Par exemple, pour le modèle User avec la colonne created_at, nous pouvons utiliser la syntaxe suivante pour afficher la date et l'heure dans un champ datetime-local  :

<input type="datetime-local" name="created_at" value="{{ $user->created_at->format('Y-m-d\TH:i:s') }}">

Dans cet exemple, nous utilisons la méthode format() pour convertir la date created_at du modèle en une chaîne au format Y-m-d\TH:i:s, qui est le format compatible pour le champ  datetime-local HTML. Le caractère \T  permet de séparer la date et l'heure dans la chaîne.

Pour afficher la date dans un input HTML de type date, le format compatible est Y-m-d :

<input type="date" name="online_at" value="{{ $post->online_at->format('Y-m-d') }}" >

Les formats de date et d'heure utilisés en HTML sont présentés dans cet article.

Astuce : Au lieu de formater la date dans la vue Blade, nous pouvons aussi la formater dans le modèle via la propriété $casts :

 protected $casts = [ "online_at" => "datetime:Y-m-d\TH:i:s" ];

Portez-vous bien 😎