Comment définir la valeur par défaut de la date du type d'entrée à aujourd'hui?


403

Les types d'entrée HTML5 sont excellents, le nouveau sélecteur de date intégré d'Opera est un jeu d'enfant, et Chrome a au moins pris en charge le nouveau type d'entrée avec une implémentation de roue de rotation.

Mais existe-t-il un moyen de définir la valeur par défaut du champ de date sur la date du jour? Avec Opera, je peux choisir «Aujourd'hui» dans le sélecteur de date, et dès que je clique sur l'un des boutons de pas dans Chrome, il incrémente / diminue la date d'aujourd'hui.

Je ne suis pas timide pour coder une solution à ce problème mineur, mais il me semble idiot que les deux navigateurs soient pleinement conscients de la date actuelle mais ne la feront pas automatiquement apparaître (au moins en tant qu'espace réservé).



cela peut être utile pour stackoverflow.com/questions/14212527/…
Musa


4
var date = new Date (); // crée un objet date var min_date = date.toISOString (). slice (0,10); //// Obtenez la partie spécifique de la date actuelle "02-02-2018"
Günay Gültekin

<input type = "date" value = "YYYY-MM-DD" />
Boris Detry

Réponses:


288

Comme tout champ de saisie HTML, le navigateur le laissera vide sauf si une valeur par défaut est spécifiée avec l' valueattribut.

Malheureusement, HTML5 ne fournit pas de moyen de spécifier «aujourd'hui» dans l' valueattribut (que je peux voir), seule une date valide RFC3339 comme 2011-09-29.

TL; DR Utilisez le YYYY-MM-DDformat de date ou il ne s'affichera pas


50
pour les utilisateurs .net: DateTime.Today.ToString ("aaaa-MM-jj")
dvdmn

3
Notez que le '0' devant le mois et le jour est nécessaire: "2011-09-29" fonctionne, "2011-9-29" ne fonctionne pas.
nico

2
Ruby: (Aussi)DateTime.now.strftime("%Y-%m-%d")
Adam Grant

43
@MartinBarker ne serait-ce pas date('Y-m-d')parce qu'il faut le zéro de tête?
SGR

15
Pour JavaScript: myDate.toLocaleDateString('en-CA')fait l'affaire
Ulysse BN

218

L'objet JavaScript Date fournit un support intégré suffisant pour le format requis pour éviter de le faire manuellement:

Ajoutez ceci pour une prise en charge correcte du fuseau horaire:

Date.prototype.toDateInputValue = (function() {
    var local = new Date(this);
    local.setMinutes(this.getMinutes() - this.getTimezoneOffset());
    return local.toJSON().slice(0,10);
});


jQuery:

$(document).ready( function() {
    $('#datePicker').val(new Date().toDateInputValue());
});​


Pure JS:

document.getElementById('datePicker').value = new Date().toDateInputValue();

1
Attention si vous supportez le mobile. Sur Android 4.0.3 (au moins), j'ai eu des problèmes où la nouvelle date sélectionnée via le contrôle de date contextuel est ajoutée à la date d'aujourd'hui, plutôt que de la remplacer. Par exemple, vous pouvez vous retrouver avec 2013-03-252013-03-27 plutôt que 2013-03-25, et il n'y a aucun moyen pour l'utilisateur de le changer.
Ben Clayton

1
@Web_Designer Assez juste. Vous voudrez ajuster avec local.setMinutes(this.getMinutes() - this.getTimezoneOffset());(comme cette réponse finira par arriver) d'abord, ensuite.
brianary

1
Cela ne définit que la propriété value , il ne définit pas l'attribut, donc si le formulaire est réinitialisé, il n'a par défaut aucune valeur. En outre, il serait beaucoup plus clair d'utiliser toISOString , qui est de toute façon ce que toJSON appelle.
RobG

1
@apraetor En fait, c'est l'inverse, car seuls les navigateurs qui prennent en charge les entrées de date prennent en charge valueAsDate(qui exclut IE, Firefox, peut-être Safari, essentiellement tout sauf Chrome, Opera, Edge et certains navigateurs mobiles). Tout prend en charge la valuepropriété que ma solution utilise, même lorsque les entrées de date reviennent aux entrées de texte dans les navigateurs non pris en charge, l'autre solution échouera ou échouera.
brianary

2
Cette réponse a fonctionné pour moi en utilisant un input[type=datetime-local]et en le changeant en slice(0,19)HTH
jcruz

189

cela fonctionne pour moi:

document.getElementById('datePicker').valueAsDate = new Date();

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement


1
ça marche dans tous les navigateurs? et les versions mobiles aussi? Testé?
Usman Younas du

2
@UsmanY Cela fait partie de la spécification HTML5, donc tout ce qui prend en charge les types d'entrée HTML5 devrait le prendre en charge valueAsDate. html.spec.whatwg.org/multipage/forms.html#dom-input-valueasdate
wersimmon

@harbichidian La proposition de saisie de date est antérieure à la proposition de valueAsDate. Avez-vous un lien vers la prise en charge du navigateur pour cette propriété?
brianary

3
La date sera convertie en heure UTC. Si vous êtes à 18 h le 27/03/2018 à -0600 et que vous définissez le valueAsDatesur new Date(), la valeur des champs sera définie sur le 28/03/2018. Voir austinfrance.wordpress.com/2012/07/09/…
Aupajo

1
Comme l'a dit @Aupajo, cela ne fixe pas la bonne date si vous ne voulez pas l'heure UTC.
ADJenks

81

Le code suivant fonctionne bien:

<input type="date" value="<?php echo date('Y-m-d'); ?>" />

Notez que cela repose sur PHP.


64
Votre réponse dépend complètement de php.
Yëco

1
Si votre formulaire de contact se trouve sur une page PHP (par exemple, sur une page WordPress ou un shortcode), cela fonctionne parfaitement. Merci beaucoup Isham!
tristanojbacon

5
Vous pouvez réduire la redondance en changeant <?php echo date('Y-m-d', strtotime(date('Y/m/d'))); ?>à<?php echo date('Y-m-d'); ?>
Murray Smith

7
Cela définit la date en fonction de la date de création (dans un serveur, dans le fuseau horaire du serveur) du document HTML. Il n'est pas nécessaire qu'elle corresponde à la date actuelle, car elle remplit réellement le champ. Le JavaScript côté client est meilleur si vous devez faire des choses qui dépendent du côté de l'utilisateur.
Jukka K. Korpela

1
vous pouvez également utiliser une balise courte <? = date ('Ym-d'); ?>. Un "écho" de moins
sashok_bg

36

Vous pouvez remplir la valeur par défaut via javascript comme indiqué ici: http://jsfiddle.net/7LXPq/

$(document).ready( function() {
    var now = new Date();
    var month = (now.getMonth() + 1);               
    var day = now.getDate();
    if (month < 10) 
        month = "0" + month;
    if (day < 10) 
        day = "0" + day;
    var today = now.getFullYear() + '-' + month + '-' + day;
    $('#datePicker').val(today);
});

Je mettrais probablement un peu plus de temps pour voir si le mois et la date sont des chiffres uniques et les préfixer avec le zéro supplémentaire ... mais cela devrait vous donner une idée.

EDIT: Ajout d'une vérification pour le zéro supplémentaire


Dans Opera (testé sur Opera 12 / Windows), cela ne fonctionne pas si vous ne mettez pas les zéros de tête au mois et au jour.
Renato

31

Suivez le format Ymd standard, si vous utilisez PHP

<input type="date" value="<?php echo date("Y-m-d"); ?>">

2
vous devez mentionner que cette réponse fonctionne si vous utilisez php, ce n'est pas le cas pour tout le monde.
Motassem MK

24

HTML

<input type="date" id="theDate">

JS

$(document).ready(function() {
    var date = new Date();

    var day = date.getDate();
    var month = date.getMonth() + 1;
    var year = date.getFullYear();

    if (month < 10) month = "0" + month;
    if (day < 10) day = "0" + day;

    var today = year + "-" + month + "-" + day;       
    $("#theDate").attr("value", today);
});

démo

Si vous ne voulez pas utiliser jQuery, vous pouvez faire quelque chose comme ça

HTML

<input type="date" id="theDate">

JS

var date = new Date();

var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();

if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;

var today = year + "-" + month + "-" + day;       
document.getElementById("theDate").value = today;

démo


22

En HTML5 en tant que tel, il n'y a aucun moyen de définir la valeur par défaut du champ de date sur la date d'aujourd'hui? Comme indiqué dans d'autres réponses, la valeur peut être définie à l'aide de JavaScript, et c'est généralement la meilleure approche si vous souhaitez définir la valeur par défaut en fonction de la date actuelle de l'utilisateur lorsque la page est chargée.

HTML5 définit la valueAsDatepropriété des input type=dateéléments, et en l'utilisant, vous pouvez définir la valeur initiale directement à partir d'un objet créé par exemple par new Date(). Cependant, par exemple, IE 10 ne connaît pas cette propriété. (Il manque également un véritable soutien input type=date, mais c'est un problème différent.)

Donc, en pratique, vous devez définir la valuepropriété, et elle doit être en notation conforme ISO 8601. De nos jours, cela peut être fait assez facilement, car nous pouvons nous attendre à ce que les navigateurs actuellement utilisés prennent en charge la toISOStringméthode:

<input type=date id=e>
<script>
document.getElementById('e').value = new Date().toISOString().substring(0, 10);
</script>

6
Ou si vous voulez qu'il soit conforme à Y10K:= new Date().toISOString().split('T')[0];
Blazemonger

1
toISOString renvoie une date et une heure UTC, il se peut donc que la date correcte ne soit pas indiquée pour le fuseau horaire de l'utilisateur. Par exemple, si l'utilisateur est UTC + 0800, de minuit à 08h00, il aura la date d'hier.
RobG

18

Si vous faites quelque chose en rapport avec la date et l'heure dans le navigateur, vous voulez utiliser Moment.js :

moment().format('YYYY-MM-DD');

moment()renvoie un objet représentant la date et l'heure actuelles. Vous appelez ensuite sa .format()méthode pour obtenir une représentation sous forme de chaîne selon le format spécifié. Dans ce cas YYYY-MM-DD,.

Exemple complet:

<input id="today" type="date">
<script>
document.getElementById('today').value = moment().format('YYYY-MM-DD');
</script>

Si vous avez déjà moment () disponible ou prévoyez de faire plus de travail de date dans votre application Web, cette solution est une évidence. Moment résout tant de problèmes.
secretwep

10

utilisez moment.js pour résoudre ce problème en 2 lignes, le type d'entrée de date html5 accepte uniquement ce format "AAAA-MM-JJ". Je résous mon problème de cette façon.

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

c'est le moyen le plus simple de résoudre ce problème.


8

Javascript

document.getElementById('date-field').value = new Date().toISOString().slice(0, 10);

Jquery

$('#date-field').val(new Date().toISOString().slice(0, 10));

Une autre option

Si vous souhaitez personnaliser la date, le mois et l'année, faites simplement la somme ou le sous comme vous le souhaitez.

function today() {
        let d = new Date();
        let currDate = d.getDate();
        let currMonth = d.getMonth()+1;
        let currYear = d.getFullYear();
        return currYear + "-" + ((currMonth<10) ? '0'+currMonth : currMonth )+ "-" + ((currDate<10) ? '0'+currDate : currDate );
    }

Appy la fonction d'aujourd'hui

document.getElementById('date-field').value = today();

$('#date-field').val(today());

7

Très simple, il suffit d'utiliser des langages côté serveur comme PHP, ASP, JAVA ou même vous pouvez utiliser javascript.

Voici la solution

<?php
  $timezone = "Asia/Colombo";
  date_default_timezone_set($timezone);
  $today = date("Y-m-d");
?>
<html>
  <body>
    <input type="date" value="<?php echo $today; ?>">
  </body>
</html>

7
<input id="datePicker" type="date" />

$(document).ready( function() {
    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);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="datePicker" type="date" />


5

si vous devez remplir le datetime d'entrée, vous pouvez utiliser ceci:

<input type="datetime-local" name="datetime" 
       value="<?php echo date('Y-m-d').'T'.date('H:i'); ?>" />

5

Pour NodeJS (Express avec modèles SWIG):

<input type="date" id="aDate" name="aDate" class="form-control" value="{{ Date.now() | date("Y-m-d") }}" />

5

Les solutions les plus simples semblent ignorer que l'heure UTC sera utilisée, y compris les plus fortement votées. Vous trouverez ci-dessous une version simplifiée, ES6, non jQuery de quelques réponses existantes:

const today = (function() {
    const now = new Date();
    const month = (now.getMonth() + 1).toString().padStart(2, '0');
    const day = now.getDate().toString().padStart(2, '0');
    return `${now.getFullYear()}-${month}-${day}`;
})();
console.log(today); // as of posting this answer: 2019-01-24

Vous devez indiquer la propriété d'un élément d'entrée à lui affecter. valueou valueAsDate? Ça a l'air bien.
ADJenks

4

C'est ce que j'ai fait dans mon code, je viens de le tester et cela a bien fonctionné, input type = "date" ne prend pas en charge la définition automatique de la curdate, donc la façon dont j'ai utilisé pour surmonter cette limitation était d'utiliser du code PHP un code simple comme celui-ci .

<html>
<head></head>
    <body>
        <form ...>
            <?php
                echo "<label for='submission_date'>Data de submissão</label>";
                echo "<input type='date' name='submission_date' min='2012-01-01' value='" . date('Y-m-d') . "' required/>";
            ?>
        </form>
    </body>
</html>

J'espère que cela aide!


1
Salut et bienvenue à SO, veuillez ajouter plus d'informations pour prendre en charge votre code et vous assurer que la personne qui pose la question souhaite une solution basée sur PHP.
Shiva

4

Les deux premières réponses sont incorrectes.

Une ligne courte courte qui utilise du JavaScript pur, tient compte du fuseau horaire local et ne nécessite aucune fonction supplémentaire à définir:

const element = document.getElementById('date-input');
element.valueAsNumber = Date.now()-(new Date()).getTimezoneOffset()*60000;
<input id='date-input' type='date'>

Ceci obtient la date / heure actuelle en millisecondes (depuis l'époque) et applique le décalage de fuseau horaire en millisecondes (minutes * 60k minutes par milliseconde).

Vous pouvez définir la date en utilisant element.valueAsDatemais vous avez ensuite un appel supplémentaire au Date()constructeur.


4

C'est quelque chose que vous devez vraiment faire côté serveur car le format de l'heure locale de chaque utilisateur diffère, sans oublier que chaque navigateur se comporte différemment.

La valeur des entrées de date Html doit être au format suivant: aaaa-mm-jj sinon elle n'affichera pas de valeur.

ASP CLASSIC OU VBSCRIPT:

current_year = DatePart("yyyy",date) 
current_month = DatePart("m",date) 
current_day = DatePart("d",date) 

IF current_month < 10 THEN
current_month = "0"&current_month
END IF
IF current_day < 10 THEN
current_day = "0"&current_day
END IF

get_date = current_year&"-"&current_month&"-"&current_day
Response.Write get_date

Sortie de la date d'aujourd'hui: 2019-02-08

Puis dans votre html: <input type="date" value="<% =get_date %>"

PHP

utilisez simplement ceci: <input type="date" value="<?= date("Y-m-d"); ?>">


4

C'est très simple en appliquant le code suivant, Utilisation PHP

<input type="date" value="<?= date('Y-m-d', time()); ?>" />

La fonction Date renverra la date actuelle, en prenant la date dans time().


2

par Javascript:

var today = new Date();

document.getElementById("theDate").value = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);

2
new Date().getFullYear()+"-"+ ((parseInt(new Date().getMonth())+1+100)+"").substring(1)

1
Veuillez ajouter une description avec votre réponse.
bawa g

1

Si vous utilisez ruby, vous pouvez utiliser ceci pour définir la valeur par défaut à la date et à l'heure d'aujourd'hui:

<input type="datetime-local" name="time" value="<%= Time.now.strftime('%Y-%m-%dT%H:%M') %>" />

1

Une solution simple:

<input class="set-today" type="date">
<script type="text/javascript">
    window.onload= function() {
        document.querySelector('.set-today').value=(new Date()).toISOString().substr(0,10));
    }
</script>

1
@GeorgeJempty Ce n'est pas le cas si l'heure actuelle en UTC est un jour différent du jour actuel. Il renverra la date actuelle en UTC, pas dans votre fuseau horaire local.
ADJenks

@adjenks Heh Je vois que c'était le moment idéal pour moi de tester, 10 minutes jusqu'à minuit
Dexygen

@adjenks J'ai finalement sorti une demi-douzaine de lignes qui évitent l'écueil UTC et s'améliorent légèrement sur quelques réponses jQuery / non-ES6 similaires existantes: stackoverflow.com/a/54341296/34806
Dexygen

La réponse a un ")" supplémentaire à la fin de la ligne et des parades superflues autour de "new Date ()". Devrait être: document.querySelector('.set-today').value=new Date().toISOString().substr(0,10);
Kirby L. Wallace

0

Comme il n'y a pas de méthode par défaut pour définir la valeur à la date d'aujourd'hui, je dirais que cela devrait dépendre de son application. Si vous cherchez à maximiser l'exposition de votre public au sélecteur de date, utilisez un script côté serveur (PHP, ASP, etc.) pour définir la valeur par défaut.

Cependant, si c'est pour la console d'administration du CMS et que vous savez que l'utilisateur aura toujours JS sur ou votre site de confiance, vous pouvez utiliser JS en toute sécurité pour remplir la valeur par défaut, comme par jlbruno.


0

J'ai eu le même problème et je l'ai résolu avec un simple JS. L'entrée:

<input type="date" name="dateOrder" id="dateOrder"  required="required">

le JS

<script language="javascript">
document.getElementById('dateOrder').value = "<?php echo date("Y-m-d"); ?>";
</script>

Important: le script JS doit se trouver dans la dernière ligne de code ou après l'entrée, car si vous mettez ce code avant, le script ne trouvera pas votre entrée.


2
Si vous utilisez PHP de toute façon, pourquoi vous embêter avec JavaScript ?
Blazemonger

0

Il n'y a pas de méthode par défaut dans HTML lui-même pour insérer la date d'aujourd'hui dans le champ de saisie. Cependant, comme tout autre champ de saisie, il acceptera une valeur.

Vous pouvez utiliser PHP pour récupérer la date d'aujourd'hui et la saisir dans le champ de valeur de l'élément de formulaire.

<?php
    // Fetch the year, month and day
    $year = date(Y);
    $month = date(m);
    $day = date(d);

    // Merge them into a string accepted by the input field
    $date_string = "$year-$month-$day";

    // Send to the browser the input field with the value set with the date string
    echo "<input type='date' value='$date_string' />";
?>

Le champ de valeur accepte le format AAAA-MM-JJ comme entrée, donc simplement en créant une variable $date_string dans le même format que la valeur d'entrée accepte et remplissez-la avec l'année, le mois et le jour extraits de la date d'aujourd'hui et voilá! Vous avez vous-même une date présélectionnée!

J'espère que cela t'aides :)

Éditer:

Si vous souhaitez que le champ de saisie soit imbriqué dans HTML plutôt que PHP, vous pouvez procéder comme suit.

<?php
    // Fetch the year, month and day
    $year = date(Y);
    $month = date(m);
    $day = date(d);

    // Merge them into a string accepted by the input field
    $date_string = "$year-$month-$day";
?>
<html>
    <head>...</head>
    <body>
        <form>
            <input type="date" value="<?php print($date_string); ?>" />
        </form>
    </body>
</html>

Je me rends compte que cette question a été posée il y a un certain temps (il y a 2 ans), mais il m'a encore fallu un certain temps pour trouver une réponse définitive sur Internet, donc cela va servir à quiconque cherche la réponse quand elle le peut et j'espère qu'elle le sera aide beaucoup tout le monde :)

Un autre montage:

Presque oublié, quelque chose qui a été une douleur royale pour moi dans le passé, oublie toujours de définir le fuseau horaire par défaut lors de la création d'un script en PHP qui utilise la fonction date ().

La syntaxe est date_default_timezone_set(...);. La documentation peut être trouvée ici sur PHP.net et la liste des fuseaux horaires pris en charge à insérer dans la fonction peut être trouvée ici . Cela a toujours été ennuyeux depuis que je suis en Australie, tout est toujours repoussé de 10 heures si je ne l'ai pas réglé correctement car il est par défaut UTC + 0000 où j'ai besoin de UTC + 1000 alors soyez prudent :)


0

Merci Peter, maintenant je change mon code.

<input type='date' id='d1' name='d1'>

<script type="text/javascript">
var d1 = new Date();
var y1= d1.getFullYear();
var m1 = d1.getMonth()+1;
if(m1<10)
    m1="0"+m1;
var dt1 = d1.getDate();
if(dt1<10)
dt1 = "0"+dt1;
var d2 = y1+"-"+m1+"-"+dt1;
document.getElementById('d1').value=d2;
</script>

3
S'il vous plaît, s'il vous plaît, veuillez ne pas utiliser document.write dans de vraies applications - il y a tellement de problèmes avec son utilisation.
Peter Hart

Peter, pouvez-vous expliquer quel problème. tu as ?
Nikhil sHETH

Peter, mentionne également comment vous obtenez la date actuelle comme valeur par défaut dans input type = date
Nikhil sHETH

1
Ce n'est pas que cela ne fonctionne pas, mais qu'en général c'est une mauvaise pratique d'utiliser document.write. Il y a une myriade de raisons pour lesquelles c'est le cas, voici quelques exemples: stackoverflow.com/questions/802854/… Si je devais absolument le faire en javascript sur le client, j'utiliserais un id sur l'élément et le document. getElementById pour obtenir l'élément et le modifier, de la même manière que certaines des autres réponses de cette page.
Peter Hart

0

Et pour ceux qui utilisent ASP VBScript

<%
'Generates date in yyyy-mm-dd format
Function GetFormattedDate(setDate)
strDate = CDate(setDate)
strDay = DatePart("d", strDate)
strMonth = DatePart("m", strDate)
strYear = DatePart("yyyy", strDate)
If strDay < 10 Then
  strDay = "0" & strDay
End If
If strMonth < 10 Then
  strMonth = "0" & strMonth
End If
GetFormattedDate = strYear & "-" & strMonth & "-" & strDay
End Function
%>

Et puis dans le corps, votre élément devrait ressembler à ceci

<input name="today" type="date" value="<%= GetFormattedDate(now) %>" />

À votre santé!


0

Même après tout ce temps, cela pourrait aider quelqu'un. Il s'agit d'une solution JS simple.

JS

  let date = new Date();
  let today = date.toISOString().substr(0, 10);
  //console.log("Today: ", today);//test
  document.getElementById("form-container").innerHTML =
    '<input type="date" name="myDate" value="' + today + '" >';//inject field

HTML

 <form id="form-container"></form>

Une solution similaire fonctionne dans Angular sans bibliothèque supplémentaire pour convertir le format de date. Pour Angular (le code est raccourci en raison du code de composant commun):

//so in myComponent.ts 
//Import.... @Component...etc...
date: Date = new Date();
today: String; //<- note String
//more const ...
export class MyComponent implements OnInit {
   //constructor, etc.... 
   ngOnInit() {
      this.today = this.date.toISOString().substr(0, 10);
   }
}
//so in component.html 
<input type="date" [(ngModel)]="today"  />

C'est beaucoup trop lourd pour avoir juste besoin d'utiliser une valeur par défaut.
reformé

Lequel des deux exemples indépendants que vous essayez de souligner? Ses 4 lignes de codes dans les deux exemples .... Le premier exemple est pur html + js donc créez un conteneur et copiez collez du code ses 3 lignes si vous ne comptez pas les commentaires. Idem pour l'exemple angulaire qui est la raison pour laquelle j'ai laissé un commentaire. Je ne sais pas ce que vous vouliez dire ...
StefaDesign
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.