Y a-t-il un moyen de modifier le format type="date"?

depuis que cette question a été posée, pas mal de choses se sont passées dans le domaine du web, et l'une des plus excitantes est l'atterrissage de composants web . Maintenant, vous pouvez résoudre ce problème avec élégance avec un HTML5 personnalisé élément conçu pour répondre à vos besoins. Si vous souhaitez modifier le fonctionnement de n'importe quelle étiquette html, construisez simplement la vôtre en jouant avec le shadow dom .

La bonne nouvelle est qu'il y a déjà beaucoup de boilerplate disponible donc très probablement vous ne aurez pas besoin de trouver une solution à partir de zéro. Juste vérifier ce que les gens construisent et obtenir des idées de là.

vous pouvez commencer avec une solution simple (et de travail) comme datetime-entrée pour polymère qui vous permet d'utiliser une étiquette comme celle-ci:

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

ou vous pouvez faire preuve de créativité et de pop-up date complète-cueilleurs stylé comme vous le souhaitez , avec le formatage et les emplacements que vous désirez, les callbacks, et votre longue liste d'options (vous avez toute une API personnalisée à votre disposition!)

conforme aux normes, Pas de piratage.

double-vérifier le polyfills disponibles , ce que navigateurs/versions ils soutiennent, et si elle couvre assez % de votre base d'utilisateurs... c'est 2018, donc les chances sont qu'il va sûrement couvrir la plupart de vos utilisateurs.

Espère que cela aide!

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

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

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

il fonctionne bien sur Chrome pour le bureau, et Safari sur iOS (particulièrement souhaitable, puisque les manipulateurs de date natifs sur les écrans tactiles sont imbattables IMHO). Je n'ai pas vérifié pour les autres, mais ne vous attendez pas à échouer sur N'importe quel Webkit.

il est important de distinguer deux formats différents :

• the RFC 3339/ISO 8601 "wire format": 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 lorsque demandé via L'API DOM. Elle est locale et de la région autonome.
• le format affiché par le contrôle de l'interface utilisateur et accepté comme entrée utilisateur. Les vendeurs de navigateur sont encouragé à suivre la sélection des préférences de l'utilisateur. Par exemple, sur Mac OS avec la région "United States" sélectionnée dans le volet Language & Text preferences, Chrome 20 utilise le format "m/d/yy".

la spécification HTML5 ne comprend aucun moyen de modifier ou de spécifier manuellement l'un ou l'autre format.

je crois 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 cueilleur de dattes personnalisé.

après de nombreux obstacles, j'ai trouvé une solution qui permet de changer le format. Il y a quelques mises en garde, mais il est utilisable si vous souhaitez que 'Jan' ou '01' soit affiché de manière cohérente. Il fonctionne dans Chrome sur Windows et Mac uniquement en raison du fait que Firefox ne prend pas encore en charge les dattiers natifs du tout.

https://github.com/northamerican/custom-input-date-format

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

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.

Essayer si vous avez besoin d'un solution rapide Pour faire aaaa-mm-jj aller "dd - Sep -2016"

1) Créer près de votre entrée une classe de portée (agir comme étiquette)

2) Mettre à jour l'étiquette chaque fois que votre date est changée par l'utilisateur, ou quand le besoin de charger des données.

Fonctionne pour les navigateurs webkit mobiles , et un pointeur-événements 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>

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

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

, Vous pouvez taper locale dans un terminal pour voir vos valeurs actuelles. Je pense que le même concept peut s'appliquer à IOS.

par exemple: Utiliser:

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

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

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/ (change pt_BR by your locale) pour créer votre propre locale personnalisée et formater vos dates comme vous le souhaitez.

une belle référence plus avancée sur la façon de changer le système par défaut la date est: https://ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu / et https://askubuntu.com/questions/21316/how-can-i-customize-a-system-locale

vous pouvez voir votre vrai format de date actuel en utilisant date :

$ date +%x
01-06-2015

mais comme LC_TIME et d_fmt semble être rejeté par chrome( et je pense que c'est un bug dans webkit ou chrome), tristement il n'a pas de travail . :'(

donc, malheureusement la réponse, c'est que si la variable d'environnement LANG ne résout pas votre problème, il n'y a pas encore de solution.

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;
}

sortie:

il n'est pas possible de changer les navigateurs Web-kit utiliser l'ordinateur de l'utilisateur ou les mobiles par défaut le format de date. Mais si vous pouvez utiliser jQuery et jQuery ui il y a une date-picker qui est designable et peut être montré dans n'importe quel format comme le veut le développeur. le lien vers l'interface de jQuery date-picker est sur cette page http://jqueryui.com/datepicker / vous pouvez trouver démo ainsi que code et documentation ou lien de documentation Si quelqu'un veux plus d'aide, il / elle peut me connecter sur le meilleur réseau social http://www.funnenjoy.com

Edit:-je trouve que chrome utilise la langue des paramètres par défaut égale à paramètres de système, mais l'utilisateur peut le modifier, mais le développeur cant forcer les utilisateurs à faire de sorte que vous avez à utiliser d'autres js solutions, comme je vous dis que vous pouvez web de recherche avec une requête comme javascript date-les sélecteurs de jquery date-picker

les navigateurs obtiennent le format date-input à partir du format Date du 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 specs à ce jour pour changer le style de contrôle de la date, il n'est pas possible de mettre en œuvre la même chose dans les navigateurs.

cependant, ce comportement d'obtenir le format de date à partir des paramètres du système est meilleur et je fortement suggérer, nous ne devrions pas essayer de le remplacer. La raison en est que les utilisateurs verront le format de date-input identique à celui qu'ils ont configuré dans le système/périphérique et avec lequel ils sont à l'aise ou qui correspond à leur locale.

rappelez-vous, c'est juste le format D'UI sur l'écran que les utilisateurs voient, dans votre javascript/backend vous pouvez toujours garder votre format désiré.

Consultez les développeurs de google sur la page même.

je sais que c'est un ancien poste, mais il vient comme première suggestion dans la recherche google, réponse courte Non , utilisateur de réponse recommandée un piker date personnalisé, la bonne réponse que j'utilise une boîte de texte pour simuler la date entrée et faire tout 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 le navigateur qui supporte le type date.

2 - la première fonction dans le code JS est pour le navigateur qui ne supporte pas le type de date et réglez le look à une entrée de texte normale.

3-Si vous voulez utiliser ce code pour plusieurs entrées de date dans votre page s'il vous plaît changer L'ID "xTime" de l'entrée de texte dans l'appel de fonction et l'entrée elle-même à quelque chose d'autre 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 que vous voulez, au lieu de jour+" / "+mois+" / "+an an+" / "+mois+" / "+jour et dans la saisie de texte utilisez un paramètre ou une valeur comme AAAA / mm / JJ pour l'utilisateur lorsque la page se charge.

function dmy() {
  var mydate = document.getElementById('dat').value;
  //alert(mydate);
  var yf = mydate.split("-")[0];
  var mf = mydate.split("-")[1];
  var df = mydate.split("-")[2];

  var b = localStorage.getItem("b");
  if (!b) {
    b = [];
  } else {
    b = JSON.parse(b);

  }
  b.push({
    df: df,
    mf: mf,
    yf: yf
  });

  localStorage.setItem("b", JSON.stringify(b));
}

function showdate() {
  var sdate = JSON.parse(localStorage.getItem('b'));
  var a = '';
  if (sdate != null) {
    for (var i = 0; i < sdate.length; i++) {
      a += sdate[i]['df'] + '/' + sdate[i]['mf'] + '/' + sdate[i]['yf'] + '<br>';

    }
  } else {
    a = 'No DATA';
  }
  document.getElementById('conversion').innerHTML = a;
}

<form onsubmit=dmy()>
  <input type="date" name="dat" id="dat">
  <input type="submit" value="submit">
</form>
<input type="button" value="convert" onclick=showdate()>
<div id="conversion"></div>

le format du HTML5 date picker dépend du format de la machine serveur date time Format.

ainsi vous pouvez le changer en changeant le format sur votre serveur de déploiement dans la barre des tâches..