Est-il possible de changer le format du type d'entrée = "date"?
Je travaille avec des éléments HTML5 sur ma page Web. Par défaut, 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
Le spécification d'entrée de date HTML5 désigne le spécification RFC3339 , qui spécifie un format de date complète égal à: yyyy-mm-dd. Voir section 5.6 de la spécification RFC3339 pour plus de détails.
Format de présentation
Les navigateurs ne sont soumis à aucune restriction quant à la manière dont ils présentent une entrée de 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 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 dépend du paramètre de langue du navigateur. Pour Edge, il est basé sur le paramètre de langue Windows. Malheureusement, tous les navigateurs Web ignorent le format de date configuré dans le système d'exploitation. Pour moi, ce comportement est très étrange et doit être pris en compte lors de l'utilisation de ce type d'entrée. Par exemple, les utilisateurs néerlandais dont le système d'exploitation ou la langue du navigateur sont définis sur en-us s'affichent 01/30/2019 à la place du format auquel ils sont habitués: 30-01-2019.
Internet Explorer 9, 10 et 11 affichent 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, bien que je n’aie pas pu le vérifier.
Depuis que cette question a été posée, de nombreuses choses se sont produites sur le Web, et l’un des plus intéressants est l’atterrissage de composants Web . Vous pouvez désormais résoudre ce problème de manière élégante avec un élément HTML5 personnalisé conçu pour répondre à vos besoins. Si vous souhaitez remplacer/modifier le fonctionnement de n’importe quelle balise HTML, construisez simplement la vôtre en jouant avec le shadow dom .
La bonne nouvelle est qu’il ya déjà beaucoup de modèles standard disponibles, de sorte que vous n’aurez probablement pas besoin de trouver une solution à partir de zéro. Juste vérifiez ce que les gens construisent et obtenez des idées à partir de là.
Vous pouvez commencer avec une solution simple (et efficace) telle que datetime-input for polymer qui vous permet d’utiliser une balise comme celle-ci:
<date-input date="{{date}}" timezone="[[timezone]]"></date-input>
ou vous pouvez créer des sélecteurs de date complets/créatifs et pop-up stylés à votre guise , avec le formatage et les paramètres régionaux souhaités, les rappels et votre longue liste d'options (vous disposez d'une API entièrement personnalisée !)
Conforme aux normes, pas de piratage.
Vérifiez les polyfill disponibles , quels navigateurs/versions ils prennent en charge, et si cela couvre suffisamment de% de votre base d'utilisateurs… Nous sommes en 2018, alors il y a de grandes chances que cela couvre la plupart de vos utilisateurs.
J'espère que ça aide!
Comme mentionné précédemment, il n’est pas officiellement possible de changer le format. Cependant, il est possible de styler le champ, donc (avec un peu d’aide JS), il affiche la date dans le format souhaité. Certaines des possibilités de manipuler la saisie de la 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 champs de date ne reste que 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/
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é pour 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, il s'agit du format à utiliser pour la valeur de l'entrée lors de la soumission du formulaire ou à la demande via l'API DOM. Il est indépendant du lieu et de la région.
- Le format affiché par le contrôle d'interface utilisateur et accepté comme entrée utilisateur. Les fournisseurs de navigateurs sont invités à suivre les préférences de l’utilisateur. Par exemple, sous Mac OS où la région "États-Unis" est sélectionnée dans la sous-fenêtre des préférences de langue et de 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 crois que le navigateur utilisera le format de date local. Ne pense pas qu'il est possible de changer. Vous pouvez bien sûr utiliser un sélecteur de date personnalisé.
Après de nombreux obstacles, j'ai proposé une solution qui permette de changer de format. Il y a quelques mises en garde, mais il est utilisable si vous souhaitez afficher "Jan" ou "01" de manière cohérente. Cela fonctionne dans Chrome sous Windows et Mac uniquement parce que Firefox ne prend pas encore en charge les sélecteurs de date natifs.
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]);
});
});
}
TOUPET:
$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.
Essayez ceci si vous avez besoin d'une solution rapide Pour que vous fassiez aaaa-mm-jj, allez "jj-sept -2016"
1) Créez près de votre classe d’entrée span span (agissez comme label)
2) Mettez à jour l'étiquette à chaque fois que votre date est modifiée par l'utilisateur ou lorsque vous devez charger des données.
Fonctionne pour les navigateurs Webkit mobiles et les événements de pointeur pour IE11 + requiert 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;
}
Sortie:
Il n'est pas possible de modifier les navigateurs de kit Web à l'aide du format de date par défaut de l'ordinateur ou du mobile. Mais si vous pouvez utiliser jquery et jquery UI, il existe un sélecteur de date qui peut être désigné et qui peut être affiché dans n’importe quel format que le développeur le souhaite. le lien vers le sélecteur de date de l'interface utilisateur jquery se trouve sur cette page http://jqueryui.com/datepicker/ vous pouvez trouver une démonstration, ainsi que du code et de la documentation ou lien de documentation
Edit: -Je constate que chrome utilise des paramètres de langue identiques par défaut aux paramètres système, mais que l'utilisateur peut les modifier, mais que le développeur ne peut pas obliger les utilisateurs à le faire. Vous devez donc utiliser d'autres solutions JS comme I Dites que vous pouvez rechercher sur le Web avec des requêtes telles que javascript date pickers ou jquery date-picker
Comme dit, le <input type=date ... > n'est pas complètement implémenté dans la plupart des navigateurs, parlons donc de webkit comme des navigateurs (chrome).
En utilisant linux, vous pouvez le changer en changeant la variable d'environnement LANG, LC_TIME ne semble pas fonctionner (pour moi du moins).
Vous pouvez taper locale dans un terminal pour afficher vos valeurs actuelles. Je pense que le même concept peut être appliqué à l'IOS.
exemple: Utilisation de:
LANG=en_US.UTF-8 /opt/google/chrome/chrome
La date est indiquée par mm/dd/yyyy
En utilisant:
LANG=pt_BR /opt/google/chrome/chrome
La date est indiquée par dd/mm/yyyy
Vous pouvez utiliser http://lh.2xlibre.net/locale/pt_BR/ (changer pt_BR selon vos paramètres régionaux) pour créer vos propres paramètres régionaux et formater vos dates à votre guise.
Une référence plus avancée sur la manière dont la date système par défaut est modifiée est la suivante: 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 format de date actuel en utilisant date:
$ date +%x
01-06-2015
Mais comme LC_TIME et d_fmt semblent rejetés par chrome (et je pense que c'est un bogue dans webkit ou chrome), malheureusement ça ne marche pas . : '(
Donc, malheureusement, la réponse est si la variable d’environnement IF LANG ne résout pas votre problème, il n’ya pas encore de solution.
Les navigateurs obtiennent le format de saisie de la 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 à ce jour pour changer le style du contrôle de date, il n'est pas possible d'implémenter la même chose dans les navigateurs.
Cependant, il est préférable d’obtenir le format de date à partir des paramètres système et je le recommande fortement, nous ne devrions pas essayer de le remplacer. La raison en est que les utilisateurs verront le format de l'entrée de date identique à celui qu'ils ont configuré dans le système/périphérique et avec lequel ils sont à l'aise ou qui correspond à leurs paramètres régionaux.
Rappelez-vous, il ne s'agit que du format de l'interface utilisateur à l'écran que les utilisateurs voient. Dans votre javascript/backend, vous pouvez toujours conserver le format souhaité.
Reportez-vous à la page des développeurs de Google sur le même.
Je sais que c’est un vieux message, mais il s’agit d’une première suggestion dans la recherche Google, réponse courte non, recommandé à l’utilisateur une date spécifique, la réponse correcte que j’utilise utilise une zone de texte pour simuler la date et faire le format que vous souhaitez. , 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">▼</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 du code JS concerne les navigateurs qui ne prennent pas en charge le type de date et définissent l'aspect sur une saisie de texte normale.
3- si vous utilisez ce code pour plusieurs entrées de date dans votre page, veuillez modifier l'ID "xTime" de la saisie de texte dans l'appel de fonction et l'entrée elle-même en quelque chose d'autre et bien sûr, utilisez le nom de l'entrée souhaitée pour le formulaire soumettre.
4-sur la deuxième fonction, vous pouvez utiliser n’importe quel format au lieu de jour + "/" + mois + "/" + année pour exemple année + "/" + mois + "/" + jour et dans la saisie de texte utiliser un espace réservé ou une valeur comme aaaa/mm/jj pour l'utilisateur lors du chargement de la page.