Development

Setting HTML date input value

How to set the default value to a HTML date input using vanilla JS or jQuery, including a method to set the date to be 1 month from now.

The date input element:

<input type="date" id="todaysDate" name="todaysDate">

Full example and code.

Setting the value to be today’s date with vanilla JS:

document.getElementById("todaysDate").valueAsDate = new Date();

Custom date with jQuery:

$("#customDate").val("2004-08-15");

Or setting a custom date such as one month from today’s date:

var the_date = new Date();
the_date.setMonth(1);
var yyyy = new Intl.DateTimeFormat("en", { year: "numeric" }).format(the_date);
var mm = new Intl.DateTimeFormat("en", { month: "2-digit" }).format(the_date);
var dd = new Intl.DateTimeFormat("en", { day: "2-digit" }).format(the_date);
var one_month_on = `${yyyy}-${mm}-${dd}`;

$("#oneMonth").val(one_month_on);

setMonth(1) is for setting the date to 1 month in advance. setMonth(6) would be 6 months advanced.

Share

Recent Posts

Kennington reservoir drained drone images

A drained and empty Kennington reservoir images from a drone in early July 2024. The…

1 year ago

Merrimu Reservoir drone images

Merrimu Reservoir from drone. Click images to view larger.

1 year ago

FTP getting array of file details such as size using PHP

Using FTP and PHP to get an array of file details such as size and…

2 years ago

Creating Laravel form requests

Creating and using Laravel form requests to create cleaner code, separation and reusability for your…

2 years ago

Improving the default Laravel login and register views

Improving the default Laravel login and register views in such a simple manner but making…

2 years ago

Laravel validation for checking if value exists in the database

Laravel validation for checking if a field value exists in the database. The validation rule…

2 years ago