Niveau : Confirmé

Formulaires HTML5 : Champ de type month et week

Tutoriel par (WebDesigner grapilleur de Kiwiz, Strasbourg)
Créé le (23360 lectures)
Tags : formulaire, type, html5, week, month

Sommaire


Champ de type month et week

Champ de type month

Le type de champ month permet de renseigner un mois dans une année. Il attend donc un format proche du type date duquel on retire l'information sur le jour.
La liste des attributs compatibles reste la même que pour le type date.
Le format attendu correspond à cette syntaxe : aaaa-mm (ex: 2012-01).

<input type="month" name="holidays">

La présentation des contrôles sur Safari et Opera se rapproche de ceux rencontrés précédemment pour les autres types de champ.

Il s'agit bien ici de sélectionner un mois dans une année précise.

       

Compatibilité du type month
Navigateurs Versions Détails
Internet Explorer Internet Explorer 9 Affiche un champ de type text.
Firefox Firefox 4 - 10
Firefox Mobile (Android 4)

 
Affiche un champ de type text.
Affiche un champ de type text sur mobile.
Chrome Chrome 16
Chrome Mobile (Android 4)
Affiche un champ de type text. Fonctionnait sous Chrome 10.
Affiche un champ select avec controle de type mois et année (Chrome Mobile)
Opera

Opera 10.6+
Opera Mobile (Android 4)

Affiche des controles d'aide à la saisie de type datepicker.
Idem sur Mobile.
Safari

Safari 5+
Safari Mobile (iOS 4)

Affiche un champ avec bouton d'incrémentation et décrémentation partant du mois courant.
Affiche une aide à la saisi de type mois et année (Safari mobile)
Android Browser Android Browser 3.1+ Affiche un champ de type text.

 

Démonstration

Champ de type week

Le type de champ week permet de renseigner une semaine dans une année. Il attend donc un format de type 2012W05 qui correspond à l'année et au numéro de semaine dans celle-ci.
La liste des attributs compatibles reste la même que pour le type date.

<input type="week" name="int_week">

La présentation des contrôles sur Safari et Opera se rapproche de ceux rencontrés précédemment pour les autres types de champ.

Sur SmartPhone, le type week ne semble pas pris en charge sur iPhone, un simple champ de type text est utilisé. Opera mobile sur Android 4 semble bien gérer l'affaire.

Compatibilité du type week
Navigateurs Versions Détails
Internet Explorer Internet Explorer 9 Affiche un champ de type text.
Firefox Firefox 4 - 10
Firefox Mobile (Android 4)
Affiche un champ de type text.
Affiche un champ de type text.
Chrome Chrome 16
Chrome Mobile Beta (Android 4)
Affiche un champ de type text. Fonctionnait sous Chrome 10.
Affiche un champ de type text sur mobile.
Opera Opera 10.6+
Opera Mobile (Android 4)
Affiche des controles d'aide à la saisie de type datepicker.
Identique sous mobile.
Safari

Safari 5+
Safari Mobile (iOS 4)

Affiche un champ avec bouton d'incrémentation et décrémentation partant de la semaine courante.
Affiche un champ de type text. (Safari mobile)
Android Browser Android Browser 3.1+ Affiche un champ de type text.

 

Démonstration