Comment définir le format de date dans la balise d'entrée de date HTML?

105

Je me demande s'il est possible de définir le format de la date dans la <input type="date"></input>balise html ... Actuellement, c'est aaaa-mm-jj, alors que j'en ai besoin au format jj-mm-aaaa.

html date input format Piotr
la source

3

N'est-ce pas un doublon possible de Spécifier la valeur de sortie d'une entrée HTML5 type = date? ? Je dirais que cette question ici est mieux posée que la plus ancienne, mais que la plus ancienne a une assez bonne réponse.

Arsen7

Possible en double de Y at - il un moyen de type d'entrée de changement = format « date »?

Vaibhav Mule

Les paramètres de mon pays sont le néerlandais et dans Chrome, il affiche JJ-MM-AAAA. Il semble que cela dépend des paramètres Windows du client utilisant le site Web.

dark_passages

11

Vous ne le faites pas.

Premièrement, votre question est ambiguë - voulez-vous dire le format dans lequel il est affiché à l'utilisateur, ou le format dans lequel il est transmis au serveur Web?

Si vous parlez du format dans lequel il est affiché à l'utilisateur, cela dépend de l'interface de l'utilisateur final, et non de tout ce que vous spécifiez dans le HTML. Habituellement, je m'attendrais à ce qu'il soit basé sur le format de date défini dans les paramètres régionaux du système d'exploitation. Cela n'a aucun sens d'essayer de le remplacer par votre propre format préféré, car le format dans lequel il s'affiche est (généralement) le bon pour les paramètres régionaux de l'utilisateur et le format dans lequel l'utilisateur est habitué à écrire / comprendre les dates.

Si vous parlez du format dans lequel il est transmis au serveur, vous essayez de résoudre le mauvais problème. Ce que vous devez faire est de programmer le code côté serveur pour accepter les dates au format aaaa-mm-jj.

Stewart
la source

1

Malheureusement, votre deuxième commentaire n'est pas tout à fait vrai dans le monde réel. Certains navigateurs, comme Chrome et Opera, respectent au moins l' ordre des entités, mais rien de plus. Par exemple, les paramètres régionaux de mon système d'exploitation spécifient qu'en tant que date courte, le premier jour d'août de cette année devrait être le 1 / 8-2016 , mais même Chrome et Opera affichent le 01/08/2016 . D'autres navigateurs, comme Safari et Firefox (au moins sur OS X) ignorent entièrement les paramètres du système d'exploitation et affichent toujours 2016-08-16 quoi qu'il arrive . Sur un site où les utilisateurs peuvent définir leurs propres préférences de date, il est certainement logique de le remplacer.

Janus Bahs Jacquet

(Ignorez la note sur Firefox et Safari… Je suis fatigué. Aucun navigateur ne prend en charge le type de date, donc ils affichent simplement le format sous-jacent de la valeur, qui dans le cas de mon code actuel est AAAA-MM-JJ .)

Janus Bahs Jacquet

La plupart des personnes qui demandent comment changer le format d'affichage / de date d'entrée veulent-elles permettre aux utilisateurs de définir leurs propres préférences ou d'infliger leurs propres formats de date préférés au monde? Ce dernier est quelque chose que personne ne devrait faire, comme je l'ai dit, mais vous pouvez discuter de toute façon pour savoir si le premier est approprié. Mais ce serait un paramètre de présentation, donc hors de la portée du HTML.

Stewart

Le problème est qu'il s'agit d'un paramètre de présentation qui ne peut pas être défini . Les paramètres de présentation appartiennent en général à CSS, mais il n'y a aucun moyen de changer cela dans CSS (ou ailleurs). En outre, même la spécification HTML elle-même n'est pas exempte de paramètres de présentation. Par exemple, la section sur input[type=password]dit que «l'agent utilisateur doit masquer la valeur afin que les personnes autres que l'utilisateur ne puissent pas la voir», ce qui est tout autant une présentation que de dire que l'agent utilisateur doit présenter la date d'une certaine manière.

Janus Bahs Jacquet

1

Certains diront que c'est une bonne chose qu'elle ne puisse pas être définie, car elle empêche les webmasters d'infliger leurs propres formats de date préférés au monde. Mais les entrées de mot de passe m'ont fait réfléchir. Dans de nombreux endroits, la spécification HTML donne des recommandations de présentation, qui sont essentiellement des recommandations pour les feuilles de style par défaut du navigateur. La différence ici est qu'il ne semble pas y avoir de propriété CSS pour cet aspect de présentation particulier.

Stewart

11

J'ai trouvé la même question ou question connexe sur stackoverflow

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

J'ai trouvé une solution simple, vous ne pouvez pas donner de format particulaire mais vous pouvez personnaliser comme ça.

Code HTML:

    <body>
<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt"  onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />
</body>

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:

ashish bhatt
la source

Encore mieux - utilisez css pour positionner un contrôle de date transparent sur l'entrée régulière

George Mauer

Merci pour votre réponse, si vous avez un lien ou un code pour cela, je dois mettre à jour

ashish bhatt

C'est une excellente option.

Dillon Burnett

Je pense qu'il demande si c'est possible avec HTML (basé sur la question), pas CSS ni Javascript.

Shizukura le

6

Si vous utilisez jQuery, voici une belle méthode simple

$("#dateField").val(new Date().toISOString().substring(0, 10));

Ou il y a la vieille méthode traditionnelle:

document.getElementById("dateField").value = new Date().toISOString().substring(0, 10)

sean.boyer
la source

4

Pourquoi ne pas utiliser le contrôle de date html5 tel quel, avec d'autres attributs qui lui permettent de fonctionner correctement sur les navigateurs prenant en charge le type de date et fonctionnant toujours sur d'autres navigateurs comme Firefox qui ne prennent pas encore en charge le type de date

<input type="date" name="input1" placeholder="YYYY-MM-DD" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" title="Enter a date in this formart YYYY-MM-DD"/>

Paul IE
la source

Paul IE

8

L'exigence était clairement, je cite - «J'en ai besoin au format jj-mm-aaaa». Comment cela aide-t-il?

Harijs Krūtainis

1

ne fonctionne pas avec Firefox. Ce html montre une entrée avec un espace réservé mm / jj / aaaa. Mes fenêtres et mon Firefox sont tous deux configurés avec le néerlandais comme première langue. Le paramètre régional Windows affiche une date courte: 30-11-2018.

Roland

1

Je pense que oui, en HTML, il n'y a pas de syntaxe pour le format JJ-MM-AAAA. Reportez-vous à cette page http://www.java2s.com/Code/SQLServer/Date-Timezone/FormatdateMmmddyyyyhhmmdp.htm . Un peu cela vous aidera. Sinon, utilisez le sélecteur de date javascript.

Rathika Jeganathan
la source

1

Je ne sais pas cela avec certitude, mais je pense que cela est censé être géré par le navigateur en fonction des paramètres de date / heure de l'utilisateur. Essayez de configurer votre ordinateur pour afficher les dates dans ce format.

Erreur de syntaxe
la source

1

$('input[type="date"]').change(function(){
   alert(this.value.split("-").reverse().join("-")); 
});

Dheeraj Rao
la source

3

Merci pour cet extrait de code, qui peut fournir une aide immédiate. Une explication appropriée améliorerait considérablement sa valeur éducative en montrant pourquoi c'est une bonne solution au problème, et la rendrait plus utile aux futurs lecteurs avec des questions similaires, mais pas identiques. Veuillez modifier votre réponse pour ajouter une explication et donner une indication des limites et des hypothèses applicables.

Toby Speight

1

J'ai fait beaucoup de recherches et je ne pense pas que l'on puisse forcer le format du <input type="date">. Le navigateur sélectionne le format local et, en fonction des paramètres utilisateur, si la langue de l'utilisateur est en anglais, la date sera affichée au format anglais (mm / jj / aaaa).

À mon avis, la meilleure solution est d'utiliser un plugin pour contrôler l'affichage.

Jquery DatePicker semble une bonne option puisque vous pouvez forcer la localisation , le format de la date ...

Fifi
la source

1

J'ai trouvé une réponse légèrement différente de tout ce que j'ai lu ci-dessus.

Ma solution utilise un petit peu de JavaScript et une entrée html.

La date acceptée par une entrée donne une chaîne au format «aaaa-mm-jj». Nous pouvons le diviser et le placer correctement en tant que nouvelle Date ().

Voici le HTML de base:

<form id="userForm">
    <input type="text" placeholder="1, 2, 3, 4, 5, 6" id="userNumbers" />
    <input type="date" id="userDate" />
    <input type="submit" value="Track" />
</form>

Voici le JS de base:

let userDate = document.getElementById('userDate').value.split('-'),
    parsedDate = new Date((`${userDate[1]}-${userDate[2]}-${userDate[0]}`));

Vous pouvez formater la date comme vous le souhaitez. Vous pouvez créer une nouvelle Date () et récupérer toutes les informations à partir de là ... ou simplement utiliser 'userDate []' pour créer votre chaîne.

Gardez à l'esprit que certaines façons de saisir une date dans «nouvelle date ()» produisent un résultat inattendu. (c'est-à-dire - un jour de retard)

thielr7
la source

1

<html>

    <body>
        <p id="result">result</p>Enter some text: <input type="date" name="txt" id="value" onchange="myFunction(value)">
        <button onclick="f()">submit</button>
        <script>
            var a;

            function myFunction(val){
                a = val.split("-").reverse().join("-");
                document.getElementById("value").type = "text";
                document.getElementById("value").value = a;
            }

            function f(){
                document.getElementById("result").innerHTML = a;
                var z = a.split("-").reverse().join("-");
                document.getElementById("value").type = "date";
                document.getElementById("value").value = z;
            }

        </script>
    </body>

</html>

pala dattadri
la source

2

Lorsque vous publiez du code HTML ici, il est très important de le formater sous forme de code. Si vous ne le faites pas, elle est formatée comme partie de la page et votre réponse ne ressemble pas à une réponse. Si vous ne savez pas comment formater, il y a un bon guide à ce sujet dans le centre d'aide

Zoe

0

La réponse directe courte est non ou pas prête à l'emploi, mais j'ai mis au point une méthode pour utiliser une zone de texte et du code JS pur pour simuler l'entrée 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 du code JS est destinée aux navigateurs qui ne prennent pas en charge le type de date et définissent l'apparence sur une saisie 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 en autre chose et bien sûr utiliser le nom de l'entrée que vous voulez pour le soumettre le formulaire.

4-sur la deuxième fonction, vous pouvez utiliser le 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.

ombragé
la source

0

Pour le formatage en mm-jj-aaaa

aa = date.split ("-")

date = aa [1] + '-' + aa [2] + '-' + aa [0]

Abilash Raghu
la source

-1

Implémentation propre sans dépendances. https://jsfiddle.net/h3hqydxa/1/

  <style type="text/css">
    .dateField {
      width: 150px;
      height: 32px;
      border: none;
      position: absolute;
      top: 32px;
      left: 32px;
      opacity: 0.5;
      font-size: 12px;
      font-weight: 300;
      font-family: Arial;
      opacity: 0;
    }

    .fakeDateField {
      width: 100px; /* less, so we don't intercept click on browser chrome for date picker. could also change this at runtime */
      height: 32px; /* same as above */
      border: none;
      position: absolute; /* position overtop the date field */
      top: 32px;
      left: 32px;
      display: visible;
      font-size: 12px; /* same as above */
      font-weight: 300; /* same as above */
      font-family: Arial; /* same as above */
      line-height: 32px; /* for vertical centering */
    }
  </style>

  <input class="dateField" id="dateField" type="date"></input>
  <div id="fakeDateField" class="fakeDateField"><em>(initial value)</em></div>

  <script>
    var dateField = document.getElementById("dateField");
    var fakeDateField = document.getElementById("fakeDateField");

    fakeDateField.addEventListener("click", function() {
      document.getElementById("dateField").focus();
    }, false);

    dateField.addEventListener("focus", function() {
      fakeDateField.style.opacity = 0;
      dateField.style.opacity = 1;
    });

    dateField.addEventListener("blur", function() {
      fakeDateField.style.opacity = 1;
      dateField.style.opacity = 0;
    });

    dateField.addEventListener("change", function() {
      // this method could be replaced by momentJS stuff
      if (dateField.value.length < 1) {
        return;
      }

      var date = new Date(dateField.value);
      var day = date.getUTCDate();
      var month = date.getUTCMonth() + 1; //zero-based month values
      fakeDateField.innerHTML = (month < 10 ? "0" : "") + month + " / " + day;
    });

  </script>

James Perih
la source

-2

Voici la solution:

  <input type="text" id="end_dt"/>

$(document).ready(function () {
    $("#end_dt").datepicker({ dateFormat: "MM/dd/yyyy" });
});

j'espère que cela résoudra le problème :)

Muhammad Waqas
la source

1

Votre solution n'utilise pas l'entrée HTML de type date, donc ne répond pas vraiment à la question.

Vincent

vous n'avez pas besoin de définir son type à ce jour. pour datepicker cela fonctionnera sans date. Essayez-le, j'espère que cela résoudra votre problème.

Muhammad Waqas

-3

Le format de la valeur de date est 'YYYY-MM-DD'. Voir l'exemple suivant

<form>
<input value="2015-11-30" name='birthdate' type='date' class="form-control" placeholder="Date de naissance"/>
</form>

Tout ce dont vous avez besoin est de formater la date en php, asp, ruby ou autre pour avoir ce format.

Charmi
la source

Comment définir le format de date dans la balise d'entrée de date HTML?

Réponses: