How to Set Input Type Date'S Default Value to Today

How to set default value to the input[type=date]

The date should take the format YYYY-MM-DD. Single digit days and months should be padded with a 0. January is 01.

From the documentation:

A string representing a date.

Value: A valid full-date as defined in [RFC 3339], with the additional qualification that the year component is four or more digits representing a number greater than 0.

Your code should be altered to:

<input type="date" value="2013-01-08">

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

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

how to configure default value of html date input

An alternative is to use the jQuery date selector that uses an input field instead of date field so that the value and placeholder attributes can be used:

http://jqueryui.com/datepicker/

html

<input type="text" id="datepicker" value="The Date">

js

$(function() {
$( "#datepicker" ).datepicker();
});


Related Topics



Leave a reply



Submit