Existe-t-il un moyen de changer le format d'entrée type = «date»?


767

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

La question est, est-il possible de changer son format en quelque chose comme DD-MM-YYYY:?


4
Google a créé une FAQ pour Chrome: developers.google.com/web/updates/2012/08/… Le format est donc basé sur les paramètres régionaux du système d'exploitation.
Endy Tjahjono

Je perds mon temps à essayer de le faire dd/mm/yyyy. utilisez simplement une autre bibliothèque comme moment ou jQuery datepicker
Ali Al Amine

Réponses:


608

Il est impossible de changer le format

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

Format de fil

La spécification d'entrée de date de HTML5 fait référence à la spécification RFC 3339 , qui spécifie un format date complète égale à: yyyy-mm-dd. Voir la section 5.6 de la spécification RFC 3339 pour plus de détails.

Ce format est utilisé par l' valueattribut HTML et la propriété DOM et est celui 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 une entrée de date. Au moment de l'écriture, Chrome, Edge, Firefox et Opera ont un support de date (voir ici ). Ils affichent tous un sélecteur de date et mettent en forme le texte dans le champ de saisie.

Appareils de bureau

Pour Chrome, Firefox et Opera, la mise en forme du texte du champ de saisie est basée 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. Pour moi, c'est un comportement très étrange et quelque chose à considérer lors de l'utilisation de ce type d'entrée. Par exemple, les utilisateurs néerlandais qui ont leur système d'exploitation ou un jeu de langue du navigateur pour en-usseront affichés au 01/30/2019lieu du format , ils sont habitués à: 30-01-2019.

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

Appareils mobiles

Spécifiquement pour Chrome sur Android, le formatage est basé sur la langue d'affichage Android. Je soupçonne qu'il en va de même pour les autres navigateurs, même si je n'ai pas pu le vérifier.


J'aurais espéré un horodatage JS et non le format filaire. Et une façon de changer le format de présentation, c'est assez difficile à rendre cohérent.
Allan Kimmer Jensen,

7
@AllanKimmerJensen bien que je comprenne vos pensées. Je crois que la décision d'utiliser le format spécifié dans RFC3339 est correcte, car elle ne crée pas de couplage entre HTML et JavaScript. Quant à votre deuxième point, je pense que du point de vue de l'utilisabilité, il serait logique que l'utilisateur voit le calendrier en fonction de ses préférences régionales.
David Walschots

10
Si l'application est pt_BR, je m'attends à une entrée pt_BR. mes paramètres système n'ont pas d'importance. HTML5 a besoin d'un moyen pour appliquer les paramètres régionaux.
iurisilvio

5
J'utilise les paramètres régionaux espagnols pour les paramètres de date / devise car je suis basé en Espagne, mais ma première langue est l'anglais et je suis habitué à une disposition de clavier américaine, donc j'utilise un clavier anglais / américain. Mes clients sont européens francophones .... J'aimerais pouvoir faire allusion à Chrome, etc. pour ne plus afficher les dates au format USA jj-aaaa!
Luke H

7
quel composant inutile, qui diable vient avec ces spécifications?
boh

144

Depuis que cette question a été posée, un certain nombre de choses se sont produites dans le domaine du Web, et l'une des plus excitantes est l'atterrissage des composants Web . Vous pouvez maintenant résoudre ce problème avec élégance avec un élément HTML5 personnalisé conçu pour répondre à vos besoins. Si vous souhaitez remplacer / changer le fonctionnement de n'importe quelle balise html, créez simplement le vôtre en jouant avec le shadow dom .

La bonne nouvelle est qu'il y a déjà beaucoup de passe-partout disponibles, donc vous n'aurez probablement pas besoin de trouver une solution à partir de zéro. Vérifiez simplement ce que les gens construisent et obtenez des idées à partir de là.

Vous pouvez commencer avec une solution simple (et fonctionnelle) comme l' entrée datetime pour le polymère qui vous permet d'utiliser une balise comme celle-ci:

 <date-input date="{{date}}" timezone="[[timezone]]"></date-input>

ou vous pouvez obtenir des sélecteurs de dates complets créatifs et pop-up stylés comme vous le souhaitez , avec la mise en forme et les paramètres régionaux que vous désirez, les rappels et votre longue liste d'options (vous avez toute une API personnalisée à votre disposition!)

Conforme aux normes, pas de piratage.

Vérifiez les polyfills disponibles , les navigateurs / versions qu'ils prennent en charge et s'ils couvrent suffisamment de% de votre base d'utilisateurs ... Nous sommes en 2018, alors il est probable que cela couvrira sûrement la plupart de vos utilisateurs.

J'espère que cela aide!


mais certains sont-ils localisables? c'est-à-dire changer les noms de mois en non anglais. Et fonctionnent-ils sur ordinateur et mobile?
Sam Hasler

Bien sûr, ils sont localisables. Vous pouvez profiter des paramètres régionaux du système (par exemple: is.gd/QSkwAY ) ou fournir vos fichiers i18n à l'intérieur du composant Web (par exemple: is.gd/Ru9U82 ). Quant aux navigateurs mobiles, ils sont supportés à l'aide de polyfills, mais pas à 100% (pour l'instant)… Consultez le lien navigateurs / versions que j'ai posté. Encore une fois, cela est à la pointe du progrès. Si vous êtes tourné vers l'avenir, c'est une excellente solution.
joseldn

Désolé, je n'avais pas vu votre dernier commentaire. Ceci: jcrowther.io/2015/05/11/i18n-and-web-components semble assez utile et devrait être inclus dans la réponse.
Sam Hasler

Heureux que vous le trouviez utile. Je mettrai à jour la réponse avec tout.
joseldn

@SDude On dirait que les liens que vous avez indiqué mériter d'être inclus ne sont toujours pas inclus.
Mark Amery

79

Comme mentionné précédemment, il n'est officiellement pas possible de modifier le format. Cependant, il est possible de styliser le champ, donc (avec un peu d'aide JS) il affiche la date dans un format que nous désirons. Certaines des possibilités de manipuler l'entrée de date sont perdues de cette façon, mais si le désir de forcer le format est plus grand, cette solution pourrait être un moyen. Un champ de date reste uniquement comme ça:

<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

Le reste est un peu CSS et JS: http://jsfiddle.net/g7mvaosL/

$("input").on("change", function() {
    this.setAttribute(
        "data-date",
        moment(this.value, "YYYY-MM-DD")
        .format( this.getAttribute("data-date-format") )
    )
}).trigger("change")
input {
    position: relative;
    width: 150px; height: 20px;
    color: white;
}

input:before {
    position: absolute;
    top: 3px; left: 3px;
    content: attr(data-date);
    display: inline-block;
    color: black;
}

input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button {
    display: none;
}

input::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 3px;
    right: 0;
    color: black;
    opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

Cela fonctionne bien sur Chrome pour le bureau et Safari sur iOS (particulièrement souhaitable, car les manipulateurs de date natifs sur les écrans tactiles sont imbattables à mon humble avis). N'a pas vérifié les autres, mais ne vous attendez pas à échouer sur un Webkit.


1
Cela ne fonctionne pas, il vous change en MMMM YYYY DDseulement les DDchangements. -1 pour cela, désolé
Can O 'Spam

3
@SamSwift - avez-vous cliqué sur "Exécuter" après avoir modifié la valeur? ;)
pmucha

9
Non il n'est pas. Vous ne comprenez pas comment cela fonctionne: vous jouez avec JS et vous devriez avec HTML. Vous avez changé le format d'entrée de la momentfonction et ce n'est pas la voie à suivre. Vous auriez dû changer data-date-format="DD-YYYY-MM"et vous obtiendrez alors 09-2015-08, ce qui est le bon résultat.
pmucha

3
Ne fonctionne pas non plus dans Safari, Edge, Opera - ce qui le rend inutilisable
MaxZoom

2
Cassé dans Firefox
Alexander Lallier

51

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, c'est le format qui doit être utilisé pour la valeur de l'entrée lors de la soumission du formulaire ou lorsqu'il est demandé via l'API DOM. Il est indépendant des paramètres régionaux et régionaux.
  • Format affiché par le contrôle de l'interface utilisateur et accepté comme entrée 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 / j / aa".

La spécification HTML5 n'inclut aucun moyen de remplacer ou de spécifier manuellement l'un ou l'autre format.


1
L' valueattribut correspond-il au format de fil, ou qu'est-ce qui est affiché à l'utilisateur?
Flimm

2
@Flimm l' valueattribut correspond toujours au format de fil.
David Walschots

14

Je pense que le navigateur utilisera le format de date local. Ne pensez pas qu'il est possible de changer. Vous pouvez bien sûr utiliser un sélecteur de date personnalisé.


1
format de date local signifie le format de date par défaut de notre téléphone ou le format de date de l'emplacement?
Govindarao Kondala

2
Cela dépend du navigateur mobile que vous utilisez. Mais je pense que ce sera la valeur par défaut du téléphone.
Michael Mior

2
Le format «local» signifie basé sur l'emplacement géographique, ce qui est probablement la pire façon de déterminer un format de date. Un Américain voyageant en Europe s'attendrait-il à ce que son téléphone intelligent commence à afficher l'heure au format 24h et les dates en aaaa-mm-jj ou jj / mm / aaaa? Ou vice versa pour un Européen aux États-Unis?
RobG

10

Google Chrome dans sa dernière version bêta utilise enfin l'entrée type=date, et le format est DD-MM-YYYY.

Il doit donc y avoir un moyen de forcer un format spécifique. Je développe une page Web HTML5 et les recherches de date échouent maintenant avec différents formats.


18
Le format DD-MM-YYYY que vous mentionnez est probablement le format de votre calendrier local. Il n'est pas sage (et pour autant que je puisse voir, impossible dans les normes HTML5 actuelles) de forcer un format spécifique sur les visiteurs d'un site Web, car ils pourraient être utilisés dans un format de calendrier différent de celui que vous leur imposez.
David Walschots

3
Vous faites référence au format de présentation, car si vous essayez de lire le fichier input.val (), google chrome (v35) renvoie la date au format aaaa-mm-jj, quel que soit le format de présentation;)
Tilt

3
@DavidWalschots si seulement les Américains réalisaient à quel point il était imprudent de forcer le format mdy retardé sur le reste du monde.
user275801

@ user275801 Bien que je sois d'accord, c'est M-D-Yun format étrange. Je n'ai pas vu d'Américains l'imposer aux autres. :-)
David Walschots

2
@DavidWalschots la plupart des logiciels et des systèmes d'exploitation que j'ai vus vous obligent à "désactiver" le format américain mdy. En ce sens, il est en fait «forcé». En fait, mon linux a tous les paramètres régionaux pour l'Australie, mais mon navigateur (un navigateur américain, si on peut l'appeler ainsi) prend toujours sur lui d'afficher toutes les dates au format mdy, et dans ce cas, je ne peux pas " se désengager".
user275801

5

Essayez ceci si vous avez besoin d'une solution rapide Pour faire aaaa-mm-jj aller "jj-sept-2016"

1) Créez près de votre classe d'entrée un span (agissez comme étiquette)

2) Mettez à jour l'étiquette à chaque fois que votre date est modifiée par l'utilisateur, ou lorsque vous devez charger à partir des données.

Fonctionne pour les mobiles de navigateur webkit et les événements de pointeur pour IE11 + nécessite jQuery et Jquery Date

$("#date_input").on("change", function () {
     $(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({ "text-align":"center", position: "absolute",left: "10px", top:"14px",width:$(this).width()}).text($(this).val().length == 0 ? "" : ($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val()))));
        });
#date_input{text-indent: -500px;height:25px; width:200px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<input id ="date_input" dateformat="d M y" type="date"/>
<span class="datepicker_label" style="pointer-events: none;"></span>


2
Cela ne répond pas à la question et nécessite 2 bibliothèques, dont aucune n'est balisée ou demandée. Il ne permet pas non plus la saisie manuelle de la date.
RobG

il n'a pas été demandé de le modifier, affiche uniquement le format ... vous pouvez le faire en tant qu'aperçu et utiliser l'entrée avec des événements de modification pour mettre à jour le format de toute façon.
Miguel

4

Après avoir lu beaucoup de discussions, j'ai préparé une solution simple mais je ne veux pas utiliser beaucoup de Jquery et CSS, juste du javascript.

Code HTML:

<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt"  onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />

Code CSS:

#dt {
  text-indent: -500px;
  height: 25px;
  width: 200px;
}

Code Javascript:

function mydate() {
  //alert("");
  document.getElementById("dt").hidden = false;
  document.getElementById("ndt").hidden = true;
}

function mydate1() {
  d = new Date(document.getElementById("dt").value);
  dt = d.getDate();
  mn = d.getMonth();
  mn++;
  yy = d.getFullYear();
  document.getElementById("ndt").value = dt + "/" + mn + "/" + yy
  document.getElementById("ndt").hidden = false;
  document.getElementById("dt").hidden = true;
}

Production:

entrez la description de l'image ici


3

Comme dit, le <input type=date ... >n'est pas complètement implémenté dans la plupart des navigateurs, parlons donc de webkit comme les navigateurs (chrome).

En utilisant linux, vous pouvez le changer en changeant la variable d'environnement LANG, LC_TIMEne semble pas fonctionner (du moins pour moi).

Vous pouvez taper localedans un terminal pour voir vos valeurs actuelles. Je pense que le même concept peut être appliqué à IOS.

par exemple: en utilisant:

LANG=en_US.UTF-8 /opt/google/chrome/chrome

La date est indiquée comme mm/dd/yyyy

En utilisant:

LANG=pt_BR /opt/google/chrome/chrome

La date est indiquée comme dd/mm/yyyy

Vous pouvez utiliser http://lh.2xlibre.net/locale/pt_BR/ (à modifier pt_BRselon vos paramètres régionaux) pour créer vos propres paramètres régionaux personnalisés et formater vos dates comme vous le souhaitez.

Une belle référence plus avancée sur la façon de modifier la date système par défaut est: https://ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu/ et https: // askubuntu. com / questions / 21316 / comment-je-personnaliser-un-système-locale

Vous pouvez voir votre format de date actuel en utilisant date:

$ date +%x
01-06-2015

Mais comme LC_TIMEet d_fmtsemble être rejeté par chrome (et je pense que c'est un bogue dans le webkit ou le chrome), malheureusement, cela ne fonctionne pas . : «(

Donc, malheureusement, la réponse est que LANGla variable d'environnement IF ne résout pas votre problème, il n'y a pas encore de moyen.


+1 Génial! en utilisant: a LANG=ja_JP.UTF-8 chromium-browserfait l'affaire pour moi. Cela fonctionne également avec Vivaldi et je suppose que dans d'autres navigateurs aussi. Merci!
lepe

2

Les navigateurs obtiennent le format de saisie de date à partir du format de date système de l'utilisateur.

(Testé dans les navigateurs pris en charge, Chrome, Edge.)

Comme il n'y a pas de norme définie par les spécifications pour changer le style de contrôle de la date, il n'est pas possible de l'implémenter dans les navigateurs.

Cependant, ce comportement d'obtention du format de date à partir des paramètres système est meilleur et je suggère fortement de ne pas essayer de le remplacer. La raison en est que les utilisateurs verront le format de la date-entrée identique à celui qu'ils ont configuré dans le système / périphérique et avec lequel ils sont à l'aise ou correspondent à leur environnement local.

Rappelez-vous, ce n'est que le format d'interface utilisateur à l'écran que les utilisateurs voient, dans votre javascript / backend, vous pouvez toujours conserver le format souhaité.

Référez-vous à la page des développeurs Google sur le même.


@downvoters, mieux vaut laisser un commentaire sur -1, pour améliorer les réponses actuelles et futures.
Rahul R.

2

Il n'est pas possible de modifier les navigateurs du kit Web en utilisant le format de date par défaut de l'ordinateur ou du mobile de l'utilisateur. Mais si vous pouvez utiliser jquery et jquery UI, il existe un sélecteur de date qui peut être conçu et peut être affiché dans n'importe quel format comme le souhaite le développeur. le lien vers le sélecteur de date jquery UI est sur cette page http://jqueryui.com/datepicker/ vous pouvez trouver une démo ainsi que du code et de la documentation ou un lien de documentation

Edit: -Je trouve que Chrome utilise des paramètres de langue qui sont par défaut égaux aux paramètres système, mais l'utilisateur peut les modifier, mais le développeur ne peut pas forcer les utilisateurs à le faire, vous devez donc utiliser d'autres solutions js comme je vous le dis, vous pouvez rechercher sur le Web avec des requêtes comme javascript date-pickers ou jquery date-picker


2

j'ai trouvé un moyen de changer le format, c'est un moyen délicat, je viens de changer l'apparence des champs de saisie de date en utilisant juste un code CSS.

input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {
  color: #fff;
  position: relative;
}

input[type="date"]::-webkit-datetime-edit-year-field{
  position: absolute !important;
  border-left:1px solid #8c8c8c;
  padding: 2px;
  color:#000;
  left: 56px;
}

input[type="date"]::-webkit-datetime-edit-month-field{
  position: absolute !important;
  border-left:1px solid #8c8c8c;
  padding: 2px;
  color:#000;
  left: 26px;
}


input[type="date"]::-webkit-datetime-edit-day-field{
  position: absolute !important;
  color:#000;
  padding: 2px;
  left: 4px;
  
}
<input type="date" value="2019-12-07">


0

Depuis le poste est actif il y a 2 mois. alors j'ai pensé donner mon avis aussi.

Dans mon cas, je reçois la date d'un lecteur de carte qui vient au format jj / mm / aaaa.

ce que je fais. Par exemple

var d="16/09/2019" // date received from card
function filldate(){
    document.getElementById('cardexpirydate').value=d.split('/').reverse().join("-");
    }
<input type="date" id="cardexpirydate">
<br /><br />
<input type="button" value="fill the date" onclick="filldate();">

ce que fait le code:

  1. il divise la date que j'obtiens en jj / mm / aaaa (en utilisant split ()) sur la base de "/" et crée un tableau,
  2. il inverse ensuite le tableau (en utilisant reverse ()) car l'entrée de date prend en charge l'inverse de ce que j'obtiens.
  3. puis il joint (en utilisant join ()) le tableau à une chaîne selon le format requis par le champ de saisie

Tout cela se fait sur une seule ligne.

j'ai pensé que cela aiderait quelqu'un, alors j'ai écrit ceci.


Cela ne répond pas à la question posée; vous analysez un format personnalisé ici, sans changer le format <input>utilisé pour afficher la valeur.
Mark Amery

ce n'est qu'un travail
Hezbullah Shah

0

J'ai recherché ce problème il y a 2 ans, et mes recherches sur Google me conduisent à nouveau à cette question. Ne perdez pas votre temps à essayer de gérer cela avec du JavaScript pur. Je perds mon temps à essayer de le faire dd/mm/yyyy. Il n'y a pas de solutions complètes adaptées à tous les navigateurs. Je recommande donc d'utiliser jQuery datepicker ou de dire à votre client de travailler avec le format de date par défaut à la place


-1

Je sais que c'est un ancien message, mais il s'agit de la première suggestion dans la recherche Google, réponse courte non, réponse recommandée à l'utilisateur un piqueur de date personnalisé, la bonne réponse que j'utilise utilise une zone de texte pour simuler la saisie de la date et faire le format que vous voulez , voici le code

<html>
<body>
date : 
<span style="position: relative;display: inline-block;border: 1px solid #a9a9a9;height: 24px;width: 500px">
    <input type="date" class="xDateContainer" onchange="setCorrect(this,'xTime');" style="position: absolute; opacity: 0.0;height: 100%;width: 100%;"><input type="text" id="xTime" name="xTime" value="dd / mm / yyyy" style="border: none;height: 90%;" tabindex="-1"><span style="display: inline-block;width: 20px;z-index: 2;float: right;padding-top: 3px;" tabindex="-1">&#9660;</span>
</span>
<script language="javascript">
var matchEnterdDate=0;
//function to set back date opacity for non supported browsers
    window.onload =function(){
        var input = document.createElement('input');
        input.setAttribute('type','date');
        input.setAttribute('value', 'some text'); 
        if(input.value === "some text"){
            allDates = document.getElementsByClassName("xDateContainer");
            matchEnterdDate=1;
            for (var i = 0; i < allDates.length; i++) {
                allDates[i].style.opacity = "1";
            } 
        }
    }
//function to convert enterd date to any format
function setCorrect(xObj,xTraget){
    var date = new Date(xObj.value);
    var month = date.getMonth();
    var day = date.getDate();
    var year = date.getFullYear();
    if(month!='NaN'){
        document.getElementById(xTraget).value=day+" / "+month+" / "+year;
    }else{
        if(matchEnterdDate==1){document.getElementById(xTraget).value=xObj.value;}
    }
}
   </script>
  </body>
</html>

1- Veuillez noter que cette méthode ne fonctionne que pour les navigateurs prenant en charge le type de date.

2- la première fonction dans le code JS est pour le navigateur qui ne prend pas en charge le type de date et définit le look sur une entrée de texte normale.

3- Si vous utilisez ce code pour plusieurs entrées de date dans votre page, veuillez changer l'ID "xTime" de l'entrée de texte dans l'appel de fonction et l'entrée elle-même pour autre chose et bien sûr utiliser le nom de l'entrée que vous voulez pour le formulaire soumettre.

4-sur la deuxième fonction, vous pouvez utiliser n'importe quel format de votre choix au lieu de jour + "/" + mois + "/" + année par exemple année + "/" + mois + "/" + jour et dans la saisie de texte utilisez un espace réservé ou une valeur comme aaaa / mm / jj pour l'utilisateur lors du chargement de la page.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.