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

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:?

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.

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!

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.

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.

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é.

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.

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>

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:

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.

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.

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

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">

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.

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

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.