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


104
<input id="datePicker" type="date" />​

Je vais définir la date d'aujourd'hui dans la date de type d' entrée datepicker dans chrome.

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

mais ça ne marche pas

Modifier ce jsFiddle - Veuillez essayer dans Chrome.


2
Si vous choisissez une date sur votre violon et inspectez le cadre de résultat, faites un $('#datePicker').val();donne "2012-09-10"et ce n'est pas le format que vous utilisez pour définir la date

Cela fonctionne en chrome de mon côté .. Que voulez-vous dire exactement par its not working?
AdityaParab

essayez { currentText: "Now" }
:,

travailler sur moi ... quel est le problème?
Netorica

1
@JigarPandya fr_FR (@ user108, ​​voir aussi stackoverflow.com/a/3496622/180100 )

Réponses:


159

Lien Fiddle: http://jsfiddle.net/7LXPq/93/

Deux problèmes à cet égard:

  1. Le contrôle de date en HTML 5 accepte au format Année - mois - jour comme nous l'utilisons dans SQL
  2. Si le mois est 9, il doit être défini comme 09 et non simplement 9. Donc, cela s'applique également au champ de jour.

Veuillez suivre le lien violon pour la démo:

var now = new Date();

var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);

var today = now.getFullYear()+"-"+(month)+"-"+(day) ;

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

4
Réponse post-2012: vérifiez ma réponse pour une solution prise en charge dans une ligne de code.
Oliv Utilo

@ OlivUtilo - bien sûr, mais votre réponse donnera parfois des résultats incorrects.
RobG

Tu as sauvé mon temps mec, merci beaucoup
Dip Surani

128

document.getElementById("datePicker").valueAsDate = new Date()

devrait marcher.


6
C'est la meilleure solution que j'ai trouvée jusqu'à présent - fonctionne sur Android 4.0.3
Ben Clayton

6
Semble définitivement plus propre que la réponse acceptée ... merci
Skipjack

1
J'ai trouvé que cela ne fonctionne pas dans Safari pour une raison quelconque :(
james_alvarez

Testé dans Chrome et Edge et fonctionne correctement. Comme @Skipjack l'a dit, c'est une réponse géniale!
Arun

Cela semble être la bonne solution, mais dans Safari (13.1.2), l'appel vous obtient une exception d'état non valide. Pas certain de pourquoi...?
fbitterlich

23

Mise à jour: je fais ça avec date.toISOString().substr(0, 10). Donne le même résultat que la réponse acceptée et bénéficie d'un bon support.


2
Travaux en safari
james_alvarez

4
Remarque: cela donne une date dans le fuseau horaire UTC. En revanche, la première réponse utilise l'heure locale.
Qwertie

@Qwertie - ils fonctionnent tous les deux sur le même Dateobjet (créé avec la nouvelle Date ou Date.now, qui hérite du fuseau horaire du navigateur). l'utilisation de toISOString ou des fonctions getDate résoudra (je pense) la même chose; donc je pense que cela devrait avoir le comportement souhaité ...
Oliv Utilo

1
@ OlivUtilo: non, ce n'est pas le cas pour la période de décalage du fuseau horaire de l'hôte.
RobG

Comme le dit Qwertie, cela donne potentiellement la mauvaise réponse si vous utilisez une date sans heure. Par exemple, le samedi 01 septembre 2018 00:00:00 GMT + 0100 est converti en "2018-08-31"
havlock

14
var today = new Date().toISOString().split('T')[0];
$("#datePicker").val(today);

Le code ci-dessus fonctionnera.


12

pour moi, le moyen le plus court de résoudre ce problème est d'utiliser moment.js et de résoudre ce problème en seulement 2 lignes.

var today = moment().format('YYYY-MM-DD');
$('#datePicker').val(today);

1
ouais comme $ ('# datePicker'). val (moment (). format ('YYYY-MM-DD'));
Umair Khalid

2
Pour les personnes ne connaissant pas Moment, si vous souhaitez formater un objet Date Javascript arbitraire avec moment (): var yourFormattedDate= moment(yourDate).format('YYYY-MM-DD'); $('#datePicker').val(yourFormattedDate);
veuncent le


1

Je crée généralement ces deux fonctions d'assistance 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 ensuite définir la valeur d'entrée de la date comme suit:

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

Et récupérez la valeur sélectionnée comme ça

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

0

Datetimepicker a toujours besoin du format d'entrée AAAA-MM-JJ, il ne se soucie pas du format d'affichage de votre modèle ou de votre datetime système local. Mais le format de sortie du sélecteur de date / heure est celui que vous souhaitez (votre système local). Il y a un exemple simple dans mon message .


0

Vous ne pouvez utiliser la date dans l'entrée type="date"que dans le formatYYYY-MM-DD

J'ai implémenté helper comme formatDatedans NODE.js express-handlebars, ne vous inquiétez pas ... utilisez simplement le format comme 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'}}" />

-5

Version Jquery

var currentdate = new Date();

$('#DatePickerInputID').val($.datepicker.formatDate('dd-M-y', currentdate));

4
$.datepickern'est pas jQuery par défaut. Vous utilisez un plugin et sans dire lequel, cette réponse est inutile.
Emile Bergeron
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.