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




style progress element (9)

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

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


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:


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

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.


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 grâce à 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 l' ombre .

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. check simplement ce que les gens construisent et obtenez des idées à partir de là.

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

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

et adaptez-le en tant que champ de saisie ... ou vous pouvez créer des sélecteurs de date complets et créatifs selon votre souhait , avec le formatage et les paramètres régionaux que vous désirez, les rappels, et votre longue liste d'options (vous avez un API personnalisée complète à votre disposition!)

Normes-conformes, pas de hacks.

Il n'y a qu'un hic, bien que nous y soyons presque , c'est toujours une solution orientée vers l'avenir: IE 10 et les anciens copains ne supporteront pas le tag personnalisé, donc revérifiez les polyfills disponibles , quels browsers/versions ils supportent , et si cela couvre assez de votre base d'utilisateurs ... Dans quelques mois, cela couvrira sûrement la plupart de vos utilisateurs, puisque tous les principaux fournisseurs de navigateurs sont à bord et enthousiastes à propos des spécifications, et une implémentation 360 est vraiment proche.

J'espère que cela aide!


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 y a un sélecteur de date qui est conçu et qui peut être affiché dans n'importe quel format comme le souhaite le développeur. le lien vers le sélecteur de date de jquery ui est sur cette page http://jqueryui.com/datepicker/ vous pouvez trouver la démo ainsi que le code et la documentation ou la documentation lien Si quelqu'un veut plus d'aide il / elle peut me connecter sur le meilleur réseau social http://www.funnenjoy.com

Edit: -Je trouve que le chrome utilise des paramètres de langue qui sont par défaut égaux aux paramètres du système, mais l'utilisateur peut les modifier, mais le développeur ne peut pas forcer les utilisateurs à le faire, donc vous devez utiliser d'autres solutions comme js preneurs de rendez-vous ou jquery


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


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.


Essayez ceci si vous avez besoin d'une solution rapide Pour rendre 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 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>


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>




input