web-dev-qa-db-fra.com

Définissez la valeur par défaut du type d'entrée de date sur Aujourd'hui, Demain, Annuel?

En HTML5, il n'y a pas de manière native de spécifier 'aujourd'hui' dans l'attribut value. Voici le code jQuery que j'aime beaucoup. Comment étendre ce code pour définir

  • date d'aujourd'hui au var today
  • la date de demain à var tomorrow
  • toute date calculée à var anydate (calculée/à partir de var today?)

et définissez les 3 id-s suivants en conséquence:

  • #theDate
  • #theTomorrow
  • #theAnydate

HTML

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

jQuery

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

demo

jqueryhtml5dateinput
7
kirandulo

Comme tout champ de saisie HTML, le navigateur le laissera vide à moins qu'une valeur par défaut ne soit spécifiée avec l'attribut value.

Malheureusement, HTML5 ne fournit pas un moyen de spécifier "aujourd'hui" dans l'attribut value (que je peux voir), seulement un RFC3339 date valide comme 2011-09-29.

source: Réponse de Tak sur "Date de type d'entrée HTML5 - Valeur par défaut à aujourd'hui?"

Dans ce cas, vous pourriez potentiellement écrire un script simplement avec +1 pour rechercher la date de demain, mais vous devrez d'abord ajouter une valeur par défaut à votre input id pour la date d'aujourd'hui.

En ce qui concerne anydate? Pas tout à fait sûr de ce que tu veux dire là. Comme un datepicker?

La question était un peu incertaine, mais je me suis dit que j'aiderais autant que possible avec les informations fournies.

Pour attribuer une date via jQuery, vous pouvez toujours faire quelque chose comme ça ...

http://jsfiddle.net/SinisterSystems/4XkVE/4/

HTML:

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

jQuery:

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!

var yyyy = today.getFullYear();
if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} today = mm+'/'+dd+'/'+yyyy;

$('#theDate').attr('value', today);

alert($('#theDate').attr('value'));

MODIFIER:

De plus, pour trouver la date d'aujourd'hui et la date de demain tout en veillant à ce que la fin du mois ou la fin de l'année ne l'affecte pas, utilisez plutôt ceci:

http://jsfiddle.net/SinisterSystems/4XkVE/6/

HTML:

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

jQuery

var today = new Date();
var tomorrow = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
var tomday = tomorrow.getDate();
var tommonth = tomorrow.getMonth() + 1;
var tomyear = tomorrow.getFullYear();
if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} today = mm+'/'+dd+'/'+yyyy;
if(tomday<10){tomday='0'+tomday} if(tommonth<10){tommonth='0'+tommonth} tomorrow = tommonth+'/'+tomday+'/'+tomyear;
$('#theDate').attr('value', today);
$('#tomorrowDate').attr('value', tomorrow);
10
Nicholas Hazel

En vous basant sur les réponses de Nicholas Hazel et sur les réponses user113716 à propos de zéros de début pour les dates , voici une fonction concise permettant d'obtenir une date formatée sous la forme AAAA-MM-JJ et de valeur d'un contrôle d'entrée de type "date".

_ { http://jsfiddle.net/wloescher/2t8v7fnf/2/

HTML

<div>Today:
    <input type="date" id="theDate" />
</div>
<div>Tomorrow:
    <input type="date" id="theTomorrow" />
</div>
<div>Any Date:
    <input type="date" id="theAnyDate" />
</div>

JavaScript

// Set values
$("#theDate").val(getFormattedDate(today()));
$("#theTomorrow").val(getFormattedDate(tomorrow()));
$("#theAnyDate").val(getFormattedDate(new Date("4/1/12")));

function today() {
    return new Date();
}

function tomorrow() {
    return today().getTime() + 24 * 60 * 60 * 1000;
}

// Get formatted date YYYY-MM-DD
function getFormattedDate(date) {
    return date.getFullYear()
        + "-"
        + ("0" + (date.getMonth() + 1)).slice(-2)
        + "-"
        + ("0" + date.getDate()).slice(-2);
}
4
wloescher

Utilisez toISOString (), qui renvoie toujours une chaîne ISO8601 de fuseau horaire "Z", et tronquez-la uniquement à la date.

var todayUTC = new Date().toISOString().substr(0,10);

var todayLocal = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60 * 1000).toISOString().substr(0,10);

var tomorrowLocal = new Date(new Date().getTime() + 24 * 60 * 60 * 1000 - new Date().getTimezoneOffset() * 60 * 1000).toISOString().substr(0,10);
0
Samuel Danielson