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

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é).

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

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();

cela fonctionne pour moi:

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

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

Le code suivant fonctionne bien:

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

Notez que cela repose sur PHP.

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

Suivez le format Ymd standard, si vous utilisez PHP

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

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

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>

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>

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.

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());

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>

<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" />

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'); ?>" />

Pour NodeJS (Express avec modèles SWIG):

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

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

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!

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.

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"); ?>">

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().

par Javascript:

var today = new Date();

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

new Date().getFullYear()+"-"+ ((parseInt(new Date().getMonth())+1+100)+"").substring(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') %>" />

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>

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.

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.

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

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>

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é!

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"  />