D'entrée date au format jj/mm/aaaa dans le champ de saisie

J'ai un HTML classique date d'entrée: <input type="date" name="dto" id="date_timepicker_end">
D'entrée date au format jj/mm/aaaa dans le champ de saisie

Maintenant, j'ai besoin de changer ce format pour être jj/mm/aaaa, et je sais que je ne peut pas changer cela en html.

Lorsque j'ajoute le datepicker de jQuery je viens d'obtenir un vide de formulaire de saisie où vous pouvez entrer n'importe quel numéro que vous souhaitez:

D'entrée date au format jj/mm/aaaa dans le champ de saisie

J'ai besoin de l'entrée pour être juste comme le HTML entrée, où l'utilisateur clique sur l'entrée et suffit de modifier la valeur en fonction de ce qu'il a cliqué. Je ne veux pas de lui être en mesure d'écrire tout nombre aléatoire.

Aussi remarque, c'est tout le code personnalisé dans un thème wordpress, j'ai donc jquery et mon custom javascript et css. Je ne peux pas ajouter des bibliothèques comme moment.js et ainsi de suite...

Quelle est la meilleure solution pour ce problème ? Je sais qu'il a été demandé à un grand nombre de fois, mais aucune de ces méthodes de travail pour moi parce que j'ai besoin de le champ de saisie comme un normal d'entrée HTML champ de date, pas une entrée vide, jj/mm/aaaa au lieu si jj/mm/aaaa.

jsfiddle: https://jsfiddle.net/t4zrrvgL/

InformationsquelleAutor IkePr | 2018-05-26
  1. 3

    Comme vous le savez déjà, vous ne pouvez pas changer le format de valeur dans un input type="date".

    La input type="date" utilise une version localisée de l'affichage de format,

    mais sa valeur est formaté comme ceci: “AAAA-MM-JJ”.

    (Doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date)

    Au lieu de tenter d'utiliser ou de modifier un modèle sur la input de la datepicker,

    J'ai essayé pour l'utilisation de l' input type="date" de travailler avec le datepicker.

    La datepicker a un dateFormat option.

    Il semble que “yy-mm-dd” correspond au format requis par le input type="date".

    En utilisant cela, j'ai terminé par un localisée datepicker dans une façon très simple:

    JS:

    //Use datepicker on the date inputs
$("input[type=date]").datepicker({
  dateFormat: 'yy-mm-dd',
  onSelect: function(dateText, inst) {
    $(inst).val(dateText); //Write the value in the input
  }
});

//Code below to avoid the classic date-picker
$("input[type=date]").on('click', function() {
  return false;
});

    HTML:

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input type="date">

    Espère que cela aide.

    InformationsquelleAutor Takit Isy
  2. 0

    vous pouvez changer la date tag: 

    <input type="date" id="myDate" max="2222-05-26">

    Ce ne sera pas permettre aux utilisateurs de saisir plus de 4 chars sur le champ de l'année.
    Aussi il n'importe pas vraiment ce qu'ils entrent cependant, vous pouvez toujours effectuer des Client-serveur côté des validations.

    InformationsquelleAutor RavianXReaver
  3. 0

    Ajouter un attribut lecture seule de votre balise html. C'est restreindre l'utilisateur à l'entrée.

    <input type="text" name="dto" id="date_timepicker_end" readonly>

    Que vous êtes à l'aide de jQuery datepicker, il a l'option disponible pour spécifier le format de date que vous souhaitez avoir.

     $("#date_timepicker_end").datepicker()
 {
    "dateFormat" : "dd-mm-yyyy" //any valid format that you want to have
 });

    Espérons que cette aide!!

    InformationsquelleAutor Kgn-web
  4. 0

    Je suis venu avec une méthode qui utilise une zone de texte pour simuler la date d'entrée et de n'importe quel 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">&#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 un navigateur prenant en charge de type date.

    2 - la première fonction dans le code JS est pour les navigateurs qui ne supportent pas de type date et de définir le style normal de saisie de texte.

    3 - si vous utilisez ce code pour plusieurs date d'entrées dans votre page s'il vous plaît changer l'ID "xTime" de la saisie de texte dans les deux appels de fonction et l'entrée elle-même à quelque chose d'autre et bien sûr, utiliser le nom de l'entrée que vous souhaitez pour le formulaire de soumission.

    4-sur la deuxième fonction, vous pouvez utiliser n'importe quel format que vous voulez, au lieu de jour+" /"+mois+" /"+an an+" /"+mois+" /"+jour et dans la saisie de texte utilisez un espace réservé ou valeur aaaa /mm /jj pour l'utilisateur lors du chargement de la page.

    InformationsquelleAutor shady