kirandulo kirandulo - 6 months ago 156
Javascript Question

Set date input type default value to Today, Tomorrow, Anydate?

In HTML5 there is not a native way of specifying 'today' in the value attribute. Here is the jQuery code I like very much. How to extend this code to set


  • today's date to
    var today

  • tomorrow's date to
    var tomorrow

  • any date calculated to
    var anydate
    (calculated/initiated from
    var today
    ?)



and define the following 3 id-s accordingly:


  • #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

Answer

Like any HTML input field, the browser will leave it empty unless a default value is specified with the value attribute.

Unfortunately HTML5 doesn't provide a way of specifying 'today' in the value attribute (that I can see), only a RFC3339 valid date like 2011-09-29.

source: Tak's answer on "HTML5 Input Type Date — Default Value to Today?"

In that instance, you could potentially write a script to simply +1 to find tomorrow's date, but you would first have to add a default value to your input id for today's date.

As far as anydate? Not entirely sure what you mean there. Like a datepicker?

The question was a bit unclear, but I figured I'd help as much as I could with the info provided.


To assign a date via jQuery, you could always do something like this...

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

EDIT:

Furthermore, to find both of today's date, and tomorrow's date, but ensure the end of the month or end of the year won't affect it, use this instead:

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