Définir la date dans le type d'entrée date

Question

Je vais définir la date du jour dans l'entrée du sélecteur de date. date type en Chrome.

$(document).ready(function() {
    let now = new Date();
    let today = now.getDate()  + '/' + (now.getMonth() + 1) + '/' + now.getFullYear();
    console.log(today);
    $('#datePicker').val(today);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="datePicker" type="date">

Cependant, cela ne fonctionne pas.

Veuillez essayer l'extrait de code dans Chrome.

Answer 1

Votre code aurait fonctionné s'il avait été dans ce format : YYYY-MM-DD c'est la norme informatique pour les formats de date http://en.wikipedia.org/wiki/ISO_8601

Answer 2

Je crée généralement ces deux fonctions d'aide lorsque j'utilise des entrées de date :

// date is expected to be a date object (e.g., new Date())
const dateToInput = date =>
  `${date.getFullYear()
  }-${('0' + (date.getMonth() + 1)).slice(-2)
  }-${('0' + date.getDate()).slice(-2)
  }`;

// str is expected in yyyy-mm-dd format (e.g., "2017-03-14")
const inputToDate = str => new Date(str.split('-'));

Vous pouvez alors définir la valeur de saisie de la date comme :

$('#datePicker').val(dateToInput(new Date()));

Et récupérez la valeur sélectionnée comme suit

const dateVal = inputToDate($('#datePicker').val())

Answer 3

Vous pouvez uniquement utiliser la date en entrée type="date" dans le mot format YYYY-MM-DD

J'ai implémenté l'aide comme formatDate dans NODE.js express-handlebars, pas besoin de s'inquiéter ... utilisez simplement le format décrit dans la première ligne.

par exemple

< input type="date" id="date" name="date" class="form-control" value="{{formatDate invoice.date 'YYYY-MM-DD'}}" />

Answer 4

Pour moi, le moyen le plus court d'obtenir la date locale et le format correct pour la saisie. type="date" c'est ceci :

var d = new Date(); 
var today = d.getFullYear()+"-"+("0"+(d.getMonth()+1)).slice(-2)+"-"+("0"+d.getDate()).slice(-2);

Ou ceci :

var d = new Date().toLocaleDateString().split('/');
var today = d[2]+"-"+("0"+d[0]).slice(-2)+"-"+("0"+d[1]).slice(-2);

Ensuite, il suffit de définir la valeur de saisie de la date :

$('#datePicker').val(today);

Answer 5

2021

J'ai trouvé un excellent moyen de le faire en utilisant les paramètres régionaux pour le formatage. Vous pouvez l'utiliser de nombreuses manières différentes. Cela fonctionne lorsque vous n'utilisez pas le sélecteur de date jquery, mais le sélecteur de date html.

  $("#datepickerEnd").val(new Date().toLocaleDateString('en-CA'));//YYYY-MM-dd

Ou divisés pour être manipulés, ajustés ou utilisés à d'autres fins.

let theDate = new Date();
  $("#datepickerEnd").val(theDate.toLocaleDateString('en-CA'));//YYYY-MM-dd

Exemple de manipulation.

  theDate.setDate(theDate.getDate()-7);
  $("#datepickerStart").val(theDate.toLocaleDateString('en-CA'));//YYYY-MM-dd

Le format "en-ca" est le format requis pour mon afficheur de date. Si le vôtre est différent, vous pouvez chercher un format de chaîne qui correspond. Puisqu'il s'agit d'une chaîne de caractères, elle ne contient pas d'informations supplémentaires qui pourraient perturber le fonctionnement de chaque région. Vous pouvez donc l'utiliser pour un simple formatage.

Pour plus d'informations

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString