web-dev-qa-db-fra.com

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

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

htmldateinputformat
96
Piotr

je pense qu'il n'y a pas de solution si vous utilisez uniquement du HTML
Je pense que vous devriez utiliser jQuery
le plugin jquery approprié est jQuery Masked Input

21
gamehelp16

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

Est-il possible de changer le format du type d’entrée = «date»?

J'ai trouvé une solution simple, vous ne pouvez pas donner de format particulier mais vous pouvez le personnaliser comme ceci. 

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

Sortie:

 enter image description here

10
ashish bhatt

Vous 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, il en va de l'interface utilisateur final et non de ce que vous spécifiez dans le code HTML. En règle générale, 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 est affiché est (en général) le format qui convient pour les paramètres régionaux de l’utilisateur et le format utilisé par l’utilisateur pour é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, c'est programmer le code côté serveur pour accepter les dates au format aaaa-mm-jj.

9
Stewart

Si vous utilisez jQuery, voici une méthode simple et agréable

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

Ou il y a l'ancienne manière traditionnelle:

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

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 de l'utilisateur, si sa langue est l'anglais, la date sera le format anglais (mm/jj/aaaa).

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

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

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

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 :)

1
Muhammad Waqas

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 . Cela vous aidera un peu. Sinon, utilisez le sélecteur de date javascript. 

1
Rathika Jeganathan

Je ne le sais pas avec certitude, mais je pense que cela est supposé ê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.

1
Syntax Error

Pourquoi ne pas utiliser le contrôle de date html5 tel quel, avec d'autres attributs lui permettant de fonctionner correctement sur les navigateurs prenant en charge le type de date et fonctionnant toujours sur d'autres navigateurs tels que Firefox qui ne prend 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"/>
1
Paul I.E

Pour le formatage en mm-jj-aaaa

aa = date.split ("-")

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

0
Abilash Raghu

Je suis venu avec une réponse légèrement différente de tout ce qui précède que j'ai lu.

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 scinder 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 la base JS:

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 construire votre chaîne.

N'oubliez pas que certaines manières de saisir une date dans 'new Date ()' produisent un résultat inattendu. (ie - un jour de retard)

0
thielr7

une réponse directe courte est non ou pas hors de la boîte mais je suis venu avec une méthode pour utiliser une zone de texte et un code JS pur pour simuler la date entrée et faire tout 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 concerne les navigateurs qui ne prennent pas en charge le type de date et définissent l'apparence d'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.

0
shady
<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>
0
pala dattadri

Mise en œuvre 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>
0
James Perih