Comment définir la valeur par défaut du type de saisie à aujourd'hui?
Les types d'entrée HTML5 sont excellents, le nouveau sélecteur de date intégré à Opera est un jeu d'enfant, et Chrome a au moins pris en charge le nouveau type d'entrée avec une implémentation à molette.
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. Dès que je clique sur l'un des boutons d'étape de Chrome, il incrémente/décroît à partir de la date d'aujourd'hui.
Je ne crains pas de coder une solution à ce problème mineur, mais il me semble ridicule que les deux navigateurs soient parfaitement au courant de la date actuelle mais ne l'inscrivent pas automatiquement (du 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'attribut value.
Malheureusement, HTML5 ne permet pas de spécifier "aujourd'hui" dans l'attribut value (que je peux voir), mais uniquement une date RFC3339 valide telle que 2011-09-29.
TL; DR Utilisez le format de date YYYY-MM-DD ou il ne sera pas affiché.
L'objet JavaScript Date fournit suffisamment de support intégré pour le format requis pour éviter de le faire manuellement:
Ajoutez ceci pour la 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.
Comme vous pouvez le voir ici, vous pouvez renseigner la valeur par défaut via JavaScript: 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 à un chiffre et les préfixer du zéro supplémentaire ... mais cela devrait vous donner une idée.
EDIT: ajout d'une vérification du zéro supplémentaire
Suivez le format standard Y-m-d, si vous utilisez PHP
<input type="date" value="<?php echo date("Y-m-d"); ?>">
En HTML5 en tant que tel, il n’existe aucun moyen de définir la valeur par défaut du champ de date sur la date du jour? Comme indiqué dans d'autres réponses, la valeur peut être définie à l'aide de JavaScript. Il s'agit généralement de la meilleure approche si vous souhaitez définir la valeur par défaut en fonction de la date du jour de l'utilisateur lors du chargement de la page.
HTML5 définit la propriété valueAsDate pour les éléments input type=date et 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 la question est différente.)
Donc, dans la pratique, vous devez définir la propriété value, qui doit être conforme à la notation conforme à ISO 8601. De nos jours, cela peut être fait assez facilement, puisque nous pouvons nous attendre à ce que les navigateurs utilisés supportent la méthode toISOString:
<input type=date id=e>
<script>
document.getElementById('e').value = new Date().toISOString().substring(0, 10);
</script>
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
Si vous faites quelque chose lié à 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 méthode .format() 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 html5 date n’accepte que le 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.
Très simple, il suffit d’utiliser des langages côté serveur tels que 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 renseigner la date et l'heure, vous pouvez utiliser ceci:
<input type="datetime-local" name="datetime"
value="<?php echo date('Y-m-d').'T'.date('H:i'); ?>" />
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 curdate, aussi j’avais l'habitude de surmonter cette limitation en utilisant PHP. code 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 ça aide!
Les solutions les plus simples semblent ignorer que le temps UTC sera utilisé, y compris les plus 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
Pour NodeJS (modèles Express avec SWIG):
<input type="date" id="aDate" name="aDate" class="form-control" value="{{ Date.now() | date("Y-m-d") }}" />
Javascript
document.getElementById('date-field').value = new Date().toISOString().slice(0, 10);
Jquery
$('#date-field').val(new Date().toISOString().slice(0, 10));
ne autre option
Si vous souhaitez personnaliser la date, le mois et l’année, faites simplement la somme ou le sous-titre souhaité ???? Pour le mois commence à la forme 0, c’est pourquoi il faut additionner 1 avec le mois.
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 Today
document.getElementById('date-field').value = today();
$('#date-field').val(today());
par Javascript:
var today = new Date();
document.getElementById("theDate").value = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);
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, aucune valeur ne sera affichée.
ASP CLASSIC, OR VBSCRIPT:
current_year = DatePart("yyyy",date)
current_month = DatePart("m",date)
current_day = DatePart("d",date)
IF current_month < 10 THEN
current_month = "0"¤t_month
END IF
IF current_day < 10 THEN
current_day = "0"¤t_day
END IF
get_date = current_year&"-"¤t_month&"-"¤t_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="<?php echo date("Y-m-d"); ?>">
new Date().getFullYear()+"-"+ ((parseInt(new Date().getMonth())+1+100)+"").substring(1)
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é!
Si vous utilisez Ruby, vous pouvez l'utiliser pour définir la valeur par défaut sur la date et l'heure d'aujourd'hui:
<input type="datetime-local" name="time" value="<%= Time.now.strftime('%Y-%m-%dT%H:%M') %>" />
J'ai eu le même problème et je l'ai corrigé avec JS simple. 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 figurer dans la dernière ligne de code ou après la saisie, car si vous placez 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 extraire la date du jour 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 en tant qu'entrée. Il vous suffit donc de créer une variable $date_string dans le même format que celui accepté par la valeur d'entrée et de la renseigner avec l'année, le mois et le jour extraits de aujourd'hui date et voil. ! Vous avez vous-même une date présélectionnée!
J'espère que cela t'aides :)
Modifier:
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 quelque temps (il y a 2 ans), mais il m'a fallu encore un certain temps pour trouver une réponse définitive sur Internet, ce qui devrait être utile à quiconque cherche la réponse chaque fois que cela est possible et espère qu'elle aide tout le monde grandement :)
Une autre édition:
Presque oublié, quelque chose qui a été une douleur royale pour moi dans le passé est de toujours oublier de définir le fuseau horaire par défaut lors de la création d’un script dans 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 supportés à insérer dans la fonction se trouve ici . Cela a toujours été agaçant puisque je suis en Australie, tout est toujours repoussé de 10 heures si je ne règle pas cela correctement, car il s'agit par défaut de UTC + 0000, où j'ai besoin de UTC + 1000, alors soyez prudent :)
Les deux principales réponses sont incorrectes.
Un one-liner court qui utilise du JavaScript pur, représente le 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'>Cela récupère la date et l'heure actuelle en millisecondes (depuis Epoch) et applique le décalage du fuseau horaire en millisecondes (minutes * 60k minutes par milliseconde).
Vous pouvez définir la date à l'aide de element.valueAsDate, mais vous avez ensuite un appel supplémentaire au constructeur Date().
Merci peter, maintenant je change de 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>
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>
Puisqu'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 souhaitez optimiser l'exposition de votre auditoire au sélecteur de date, utilisez un script côté serveur (PHP, ASP, etc.) pour définir la valeur par défaut.
Cependant, s'il s'agit de la console d'administration du CMS et que vous savez que l'utilisateur aura toujours JS sur ou votre site sera approuvé, vous pouvez utiliser JS en toute sécurité pour renseigner la valeur par défaut, comme indiqué par jlbruno.