Like any HTML input field, the browser will leave the date element empty unless a default value is specified within the value
attribute. Unfortunately, HTML5 doesn't provide a way of specifying 'today'
in the HTMLInputElement.prototype.value
.
One must instead explicitly provide a RFC3339 formatted date (YYYY-MM-DD
). For example:
element.value = "2011-09-29"
The JavaScript Date object provides enough built-in support for the required format to avoid doing it manually:
Add this for correct timezone support:
Date.prototype.toDateInputValue = (function() {
var local = new Date(this);
local.setMinutes(this.getMinutes() - this.getTimezoneOffset());
return local.toJSON().slice(0,10);
});
jQuery:
$(document).ready( function() {
$('#datePicker').val(new Date().toDateInputValue());
});
Pure JS:
document.getElementById('datePicker').value = new Date().toDateInputValue();
local.setMinutes(this.getMinutes() - this.getTimezoneOffset());
(as that answer eventually gets to) first, then.
valueAsDate
(that leaves out IE, Firefox, maybe Safari, basically everything but Chrome, Opera, Edge, and some mobile browsers). Everything supports the value
property my solution uses, even when date inputs fall back to text inputs in the non-supporting browsers, the other solution will error or fail.
input[type=datetime-local]
and changing it to slice(0,19)
HTH
Use HTMLInputElement.prototype.valueAsDate
:
document.getElementById('datePicker').valueAsDate = new Date();
valueAsDate
. html.spec.whatwg.org/multipage/forms.html#dom-input-valueasdate
valueAsDate
to new Date()
, the fields value will be set to 2018-03-28. See austinfrance.wordpress.com/2012/07/09/…
This relies upon PHP:
<input type="date" value="<?php echo date('Y-m-d'); ?>" />
<?php echo date('Y-m-d', strtotime(date('Y/m/d'))); ?>
to <?php echo date('Y-m-d'); ?>
You could fill the default value through JavaScript as seen here:
$(document).ready( function() {
var now = new Date();
var month = (now.getMonth() + 1);
var day = now.getDate();
if (month < 10)
month = "0" + month;
if (day < 10)
day = "0" + day;
var today = now.getFullYear() + '-' + month + '-' + day;
$('#datePicker').val(today);
});
I would probably put a bit of extra time to see if the month and date are single digits and prefix them with the extra zero...but this should give you an idea.
EDIT: Added check for the extra zero.
Follow the standard Y-m-d format, if you are using PHP
<input type="date" value="<?php echo date("Y-m-d"); ?>">
In HTML5 as such, there is no way to set the default value of the date field to today’s date? As shown in other answers, the value can be set using JavaScript, and this is usually the best approach if you wish to set the default according to what is current date to the user when the page is loaded.
HTML5 defines the valueAsDate
property for input type=date
elements, and using it, you could set the initial value directly from an object created e.g. by new Date()
. However, e.g. IE 10 does not know that property. (It also lacks genuine support to input type=date
, but that’s a different issue.)
So in practice you need to set the value
property, and it must be in ISO 8601 conformant notation. Nowadays this can be done rather easily, since we can expect currenty used browsers to support the toISOString
method:
<input type=date id=e>
<script>
document.getElementById('e').value = new Date().toISOString().substring(0, 10);
</script>
= new Date().toISOString().split('T')[0];
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 +"T00:00";
$("#theDate").attr("value", today);
});
demo
If you don't want to use jQuery you can do something like this
JS
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;
document.getElementById("theDate").value = today;
demo
TS
const date = new Date()
const year = date.getFullYear()
let month: number | string = date.getMonth() + 1
let day: number | string = date.getDate()
if (month < 10) month = '0' + month
if (day < 10) day = '0' + day
const today = `${year}-${month}-${day}`
document.getElementById("theDate").value = today;
If you're doing anything related to date and time in the brower, you want to use Moment.js:
moment().format('YYYY-MM-DD');
moment()
returns an object representing the current date and time. You then call its .format()
method to get a string representation according to the specified format. In this case, YYYY-MM-DD
.
Full example:
<input id="today" type="date">
<script>
document.getElementById('today').value = moment().format('YYYY-MM-DD');
</script>
HTML code:
<input type="date" value="2022-01-31">
PHP code:
<input type="date" value="<?= date('Y-m-d') ?>">
Date format must be "yyyy-mm-dd"
Javascript
document.getElementById('date-field').value = new Date().toISOString().slice(0, 10);
Jquery
$('#date-field').val(new Date().toISOString().slice(0, 10));
Another Option
If you want to customize the date, month and year just do sum or sub as your wish 😎 For month is started form 0 that is why need to sum 1 with the month.
function today() {
let d = new Date();
let currDate = d.getDate();
let currMonth = d.getMonth()+1;
let currYear = d.getFullYear();
return currYear + "-" + ((currMonth<10) ? '0'+currMonth : currMonth )+ "-" + ((currDate<10) ? '0'+currDate : currDate );
}
Appy the today function
document.getElementById('date-field').value = today();
$('#date-field').val(today());
use moment.js to solve this issue in 2 lines, html5 date input type only accept "YYYY-MM-DD" this format. I solve my problem this way.
var today = moment().format('YYYY-MM-DD');
$('#datePicker').val(today);
this is simplest way to solve this issue.
Simplest working version I tested:
This is very much simple by applying following code, Using PHP
<input type="date" value="<?= date('Y-m-d', time()); ?>" />
Date function will return current date, by taking date in time()
.
<input id="datePicker" type="date" />
$(document).ready( function() { var now = new Date(); var day = ("0" + now.getDate()).slice(-2); var month = ("0" + (now.getMonth() + 1)).slice(-2); var today = now.getFullYear()+"-"+(month)+"-"+(day) ; $('#datePicker').val(today); });
Very Simple, Just use server side languages like PHP,ASP,JAVA or even you can use javascript.
Here is the solution
<?php
$timezone = "Asia/Colombo";
date_default_timezone_set($timezone);
$today = date("Y-m-d");
?>
<html>
<body>
<input type="date" value="<?php echo $today; ?>">
</body>
</html>
Both top answers are incorrect.
A short one-liner that uses pure JavaScript, accounts for the local timezone and requires no extra functions to be defined:
const element = document.getElementById('date-input'); element.valueAsNumber = Date.now()-(new Date()).getTimezoneOffset()*60000;
This gets the current datetime in milliseconds (since epoch) and applies the timezone offset in milliseconds (minutes * 60k minutes per millisecond).
You can set the date using element.valueAsDate
but then you have an extra call to the Date()
constructor.
if you need to fill input datetime you can use this:
<input type="datetime-local" name="datetime"
value="<?php echo date('Y-m-d').'T'.date('H:i'); ?>" />
For NodeJS (Express with SWIG templates):
<input type="date" id="aDate" name="aDate" class="form-control" value="{{ Date.now() | date("Y-m-d") }}" />
The simplest solutions seem to overlook that UTC time will be used, including highly up-voted ones. Below is a streamlined, ES6, non-jQuery version of a couple of existing answers:
const today = (function() {
const now = new Date();
const month = (now.getMonth() + 1).toString().padStart(2, '0');
const day = now.getDate().toString().padStart(2, '0');
return `${now.getFullYear()}-${month}-${day}`;
})();
console.log(today); // as of posting this answer: 2019-01-24
value
or valueAsDate
? Looks good though.
This is what I did in my code, I have just tested and it worked fine, input type="date" does not support to set curdate automatically, so the way I used to overcome this limitation was using PHP code a simple code like this.
<html>
<head></head>
<body>
<form ...>
<?php
echo "<label for='submission_date'>Data de submissão</label>";
echo "<input type='date' name='submission_date' min='2012-01-01' value='" . date('Y-m-d') . "' required/>";
?>
</form>
</body>
</html>
Hope it helps!
This is something you really need to do server-side as each user's local time format differs, not to mention each browser behaves different.
Html Date inputs value should be in this format: yyyy-mm-dd otherwise it will not show a value.
ASP CLASSIC , OR VBSCRIPT:
current_year = DatePart("yyyy",date)
current_month = DatePart("m",date)
current_day = DatePart("d",date)
IF current_month < 10 THEN
current_month = "0"¤t_month
END IF
IF current_day < 10 THEN
current_day = "0"¤t_day
END IF
get_date = current_year&"-"¤t_month&"-"¤t_day
Response.Write get_date
Output of today's date : 2019-02-08
Then in your html: <input type="date" value="<% =get_date %>"
PHP
just use this: <input type="date" value="<?= date("Y-m-d"); ?>">
Even after all these time, it might help someone. This is simple JS solution.
JS
let date = new Date();
let today = date.toISOString().substr(0, 10);
//console.log("Today: ", today);//test
document.getElementById("form-container").innerHTML =
'<input type="date" name="myDate" value="' + today + '" >';//inject field
HTML
<form id="form-container"></form>
Similar solution works in Angular without any additional library to convert date format. For Angular (code is shortened due to common component code):
//so in myComponent.ts
//Import.... @Component...etc...
date: Date = new Date();
today: String; //<- note String
//more const ...
export class MyComponent implements OnInit {
//constructor, etc....
ngOnInit() {
this.today = this.date.toISOString().substr(0, 10);
}
}
//so in component.html
<input type="date" [(ngModel)]="today" />
A future proof solution, also an alternative to .split("T")[0]
that doesn't create a string array in memory, would be using String.slice()
as shown below:
new Date().toISOString().slice(0, -14);
A lot of the answers given here, such as slice(0, 10)
, substring(0, 10)
etc will fail in the future.
They use Date.toJSON()
which returns Date.toISOString()
:
The toISOString() method returns a string in simplified extended ISO format (ISO 8601), which is always 24 or 27 characters long (YYYY-MM-DDTHH:mm:ss.sssZ or ±YYYYYY-MM-DDTHH:mm:ss.sssZ, respectively). The timezone is always zero UTC offset, as denoted by the suffix "Z".
Once the year becomes 5 digit, these answers will fail.
datePickerId.value = new Date().toISOString().slice(0, -14);
by Javascript:
var today = new Date();
document.getElementById("theDate").value = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);
new Date().getFullYear()+"-"+ ((parseInt(new Date().getMonth())+1+100)+"").substring(1)
A simple solution:
<input class="set-today" type="date">
<script type="text/javascript">
window.onload= function() {
document.querySelector('.set-today').value=(new Date()).toISOString().substr(0,10));
}
</script>
document.querySelector('.set-today').value=new Date().toISOString().substr(0,10);
This returns in the same YYYY-MM-DD format as in ISO but in your local time instead of being UTC.
function getToday() {
return new Date().toLocaleDateString('en-CA', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
}
If you are using ruby you can use this to set the default value to today's date and time:
<input type="datetime-local" name="time" value="<%= Time.now.strftime('%Y-%m-%dT%H:%M') %>" />
Since Date type only accepts the format "yyyy-MM-dd", you need to format the date value accordingly.
Here is the solution for this,
var d = new Date();
var month = d.getMonth();
var month_actual = month + 1;
if (month_actual < 10) {
month_actual = "0"+month_actual;
}
var day_val = d.getDate();
if (day_val < 10) {
day_val = "0"+day_val;
}
document.getElementById("datepicker_id").value = d.getFullYear()+"-"+ month_actual +"-"+day_val;
Success story sharing
DateTime.now.strftime("%Y-%m-%d")
date('Y-m-d')
as it requires the leading zero?myDate.toLocaleDateString('en-CA')
does the trick