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

Question

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

[Here are some examples of how you could able to add default date or customize date using jquery and javascript.](https://stackoverflow.com/a/55511212/5695622) — MD Iyasin Arafat, Apr 04 '19 at 08:56

score 12 · Accepted Answer · edited Jun 20 '20 at 09:12

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

Thanks Nicholas. Explicitly: I need 2 id-s at the and: `#theDate` with value of today, and `#theTomorrow` with value of tomorrow. Please tell me how to alert both #theDate and #theTomorrow simultanously at the end. Thank you. — kirandulo, Jan 25 '14 at 23:30
The one problem you'll be encountering with `+1` is that if it's the end of the month, it won't reflect accurately. I'll update a solution. Two secs. — Nicholas Hazel, Jan 25 '14 at 23:37
Updated. Let me know if that resolves your issue, or if you can work off of it from there. — Nicholas Hazel, Jan 25 '14 at 23:46
Yes, the issue is the +1 won't reflecting accurately. In fact I would use the `#theDate` and `#tomorrowDate` id-s on a wordpress contact7 form to pre-load 2 date fields in advance before the user start to fill the form. The script I shared initially worked seamlessly providing only the #theDate. But I still cannot make this work. :( — kirandulo, Jan 26 '14 at 00:40
Sorry. I don't know **wordpress** (you didn't tag it). I find `CMS` systems to be less than reliable. I would encourage you to ask a new question and tag **wordpress**, as that will target people with that skill. Feel free to link your new question to this one. All I know is I answered the question asked. If you would like to mark as accepted (**green checkbox next to voting arrows**), I would appreciate it. — Nicholas Hazel, Jan 26 '14 at 00:43

score 5 · Answer 2 · edited May 23 '17 at 10:29

Building on Nicholas Hazel's response and user113716 answer about leading zeroes for dates, here's a concise function to get a date formmated as YYYY-MM-DD and set the value of a "date" type input control.

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

If you leave the page open across multiple days your `today` and `tomorrow` will be incorrect. It is probably better for them to be defined as functions so the code is `today()` or `tomorrow()` instead. — Seph, Oct 06 '14 at 13:33
Good point Seph - I've modified code to include use new today() and tomorrow() functions — wloescher, Oct 06 '14 at 19:09

score 1 · Answer 3 · answered May 20 '16 at 10:15

Use toISOString(), which always returns a "Z" timezone ISO8601 string, and truncate it to just the 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);

score 0 · Answer 4 · answered Jul 05 '19 at 13:50

0

I found Very Easy Solution:

echo (new DateTime('tomorrow'))->format('Y-m-d'); //-- For tomorrow
echo (new DateTime())->format('Y-m-d'); //-- For today

answered Jul 05 '19 at 13:50

Umesh Gaire

23
5

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

4 Answers4

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

EDIT:

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

Linked