Question Est-il possible de changer le type d'entrée = format "date"?


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

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


550
2017-09-10 13:33


origine


Réponses:


Il est impossible de changer le format

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

Format de fil le Spécification d'entrée de date HTML5 se réfère à la Spécification RFC3339, qui spécifie un format de date complète égal à: aaaa-mm-jj. Voir section 5.6 de la spécification RFC3339 pour plus de détails.

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 la rédaction, 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.

La mise en forme du texte du champ de saisie est correctement effectuée dans Chrome. Edge, Firefox et Opera affichent la date avec le jour, le mois et l'année dans le bon ordre pour les paramètres régionaux, mais utilisent des barres obliques de manière incohérente (30/01/2018) où par exemple des tirets (30-01-2018) sont attendus par le format de calendrier de l'environnement local.

Internet Explorer 9, 10 et 11 affiche un champ de saisie de texte avec le format de fil.


483
2018-03-01 15:59



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

Les bonnes nouvelles sont qu'il y a déjà beaucoup de passe-partout disponibles donc très probablement vous n'aurez pas besoin de trouver une solution à partir de zéro. Juste vérifier ce que les gens construisent et obtiennent des idées à partir de là.

Vous pouvez commencer avec une solution simple (et fonctionnelle) comme date-util pour un polymère qui vous permet d'utiliser une étiquette comme celle-ci:

<date-util format="dd/MM/yyyy"></date-util>

et l'adapter comme un champ de saisie ... ou vous pouvez obtenir des sélecteurs de date complets créatifs et pop-up stylé comme vous le souhaitez, avec le formatage et les locales que vous désirez, les rappels, et votre longue liste d'options (vous avez toute une API personnalisée à votre disposition!)

Normes-conformes, pas de hacks. 

Il y a seulement une prise, bien que nous y sommes presque, c'est toujours une solution orientée vers l'avenir: IE 10 et les anciens copains ne supporteront pas la balise personnalisée, donc revérifiez la polyfills disponibles, quelle navigateurs / versions ils supportent, et s'ils couvrent assez de votre base d'utilisateurs ... Dans quelques mois, ils couvriront sûrement la plupart de vos utilisateurs, puisque tous les principaux fournisseurs de navigateurs sont à bord et enthousiastes sur les spécifications, et une implémentation 360 est vraiment proche.

J'espère que cela aide!


103
2017-08-21 22:01



Comme mentionné précédemment, il n'est officiellement pas possible de changer 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 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 ordinateur de bureau, et Safari sur iOS (particulièrement souhaitable, puisque 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.


59
2017-07-01 13:14



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 lorsque cela est demandé via l'API DOM. Il est indépendant de la région et de la région.
  • Le format affiché par l'interface utilisateur contrôle 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.


43
2017-07-09 18:11



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


13
2017-09-10 13:39



Après de nombreux obstacles, j'ai trouvé une solution qui permet de changer le format. Il y a quelques avertissements 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 sélecteurs de date 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]);
        });
    });
}

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

10
2017-08-15 01:27



Google Chrome dans sa dernière version bêta utilise enfin l'entrée type=dateet 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.


8
2018-06-16 15:30



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

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

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 mobiles de navigateur webkit et 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>


4
2018-06-22 17:32