Existe-t-il un moyen de modifier le format de l'entrée type="date" ?

Question

Je travaille avec des éléments HTML5 sur ma page Web. Par défaut, l'entrée type="date" montre la date comme YYYY-MM-DD .

La question est de savoir s'il est possible de changer son format en quelque chose du type : DD-MM-YYYY ?

Answer 1

Il est impossible de modifier le format

Nous devons faire la différence entre le format over the wire et le format de présentation du navigateur.

Format du fil

Le site Spécification HTML5 pour la saisie de la date fait référence à la Spécification RFC 3339 qui spécifie un format de date complet égal à : yyyy-mm-dd . Voir section 5.6 de la spécification RFC 3339 pour plus de détails.

Ce format est utilisé par le value Attribut HTML et propriété DOM, c'est celui qui est utilisé lors de la soumission d'un formulaire ordinaire.

Format de présentation

Les navigateurs ne sont pas limités dans la façon dont ils présentent la saisie d'une date. Au moment de la rédaction de cet article, Chrome, Edge, Firefox et Opera prennent en charge la date (voir ici ). Ils affichent tous un sélecteur de date et formatent le texte dans le champ de saisie.

Appareils de bureau

Pour Chrome, Firefox et Opera, le formatage du texte du champ de saisie est basé sur le paramètre de langue du navigateur. Pour Edge, il est basé sur le paramètre de langue de Windows. Malheureusement, tous les navigateurs Web ignorent le formatage de la date configuré dans le système d'exploitation. Je trouve ce comportement très étrange et je pense qu'il faut en tenir compte lorsque vous utilisez ce type de saisie. Par exemple, les utilisateurs néerlandais dont la langue du système d'exploitation ou du navigateur est configurée sur en-us seront montrés 01/30/2019 au lieu du format auquel ils sont habitués : 30-01-2019 .

Internet Explorer 9, 10 et 11 affiche un champ de saisie de texte au format filaire.

Dispositifs mobiles

Pour ce qui est de Chrome sur Android, le formatage est basé sur le langage d'affichage d'Android. Je soupçonne qu'il en va de même pour les autres navigateurs, bien que je n'aie pas pu le vérifier.

Answer 2

Il est important de distinguer deux formats différents :

• Le "format de fil" RFC 3339/ISO 8601 : AAAA-MM-JJ. Selon la spécification HTML5, il s'agit du format qui doit être utilisé pour la valeur de l'entrée lors de la soumission du formulaire ou lors d'une demande via l'API DOM. Il est indépendant de la localisation et de la région.
• Le format affiché par le contrôle de l'interface utilisateur et accepté comme entrée par l'utilisateur. Les fournisseurs de navigateurs sont encouragés à suivre la sélection des préférences de l'utilisateur. Par exemple, sur Mac OS, avec la région "États-Unis" sélectionnée dans le volet des préférences Langue et texte, Chrome 20 utilise le format "m/d/yy".

La spécification HTML5 ne prévoit aucun moyen de remplacer ou de spécifier manuellement l'un ou l'autre format.

Answer 3

Je pense que le navigateur utilisera le format de date local. Je ne pense pas qu'il soit possible de le modifier. Vous pouvez bien sûr utiliser un sélecteur de date personnalisé.

Answer 4

Google Chrome dans sa dernière version bêta utilise enfin la saisie type=date et le format est DD-MM-YYYY .

Il doit donc y avoir un moyen de forcer un format spécifique. Je suis en train de développer une page web HTML5 et les recherches de dates échouent maintenant avec différents formats.

Answer 5

Après de nombreux obstacles, j'ai trouvé une solution qui permet de changer le format. Il y a quelques problèmes, mais cette solution est utilisable si vous souhaitez que 'Jan' ou '01' soit affiché de manière cohérente. Cette solution ne fonctionne que dans Chrome sur Windows et Mac, car Firefox ne prend pas encore en charge les sélecteurs de date natifs.

http://jsfiddle.net/northamerican/y8ajxdea/

JS :

function updateDateInputs() { 
    $('input').each(function() {
        var $date = $(this),
            date = $date.val().split('-'),
            format = ['year', 'month', 'day'];
        $.each(format, function(i, v) {
            $date.attr('data-' + v, +date[i]);
        });
    });
}

SASS :

$months: '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12';
@each $month in $months {
    $i: index($months, $month);

    input[data-month="#{$i}"][data-style="reg"]::-webkit-datetime-edit-month-field:after { 
        content: "#{$month}";
    }
}