HTML5 Input datetime-local default value of today and current time - html

Question

Is there anyway that I can make a default value of HTML5 input type='datetime-local' to today's date and this current time.
Thanks before

Answer 1

You can make it shorter:
<input type="datetime-local" id="cal">
window.addEventListener('load', () => {
var now = new Date();
now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
/* remove second/millisecond if needed - credit ref. https://stackoverflow.com/questions/24468518/html5-input-datetime-local-default-value-of-today-and-current-time#comment112871765_60884408 */
now.setMilliseconds(null)
now.setSeconds(null)
document.getElementById('cal').value = now.toISOString().slice(0, -1);
});

Answer 2

It's possible. By using a JQuery function, you can have a really complete solution.
Here is an example.
JSFiddle http://jsfiddle.net/v8MNx/1/
HTML
<form action="demo.html" id="myForm">
<p>
<label>Date:</label>
<input type="datetime" name="anniversaire" id="anniversaire"/>
</p>
<input type="submit" value="Submit"/>
</form>
JQuery:
//Function found here: https://gist.github.com/ryanburnette/8803238
$.fn.setNow = function (onlyBlank) {
var now = new Date($.now())
, year
, month
, date
, hours
, minutes
, seconds
, formattedDateTime
;
year = now.getFullYear();
month = now.getMonth().toString().length === 1 ? '0' + (now.getMonth() + 1).toString() : now.getMonth() + 1;
date = now.getDate().toString().length === 1 ? '0' + (now.getDate()).toString() : now.getDate();
hours = now.getHours().toString().length === 1 ? '0' + now.getHours().toString() : now.getHours();
minutes = now.getMinutes().toString().length === 1 ? '0' + now.getMinutes().toString() : now.getMinutes();
seconds = now.getSeconds().toString().length === 1 ? '0' + now.getSeconds().toString() : now.getSeconds();
formattedDateTime = year + '-' + month + '-' + date + 'T' + hours + ':' + minutes + ':' + seconds;
if ( onlyBlank === true && $(this).val() ) {
return this;
}
$(this).val(formattedDateTime);
return this;
}
$(function () {
// Handler for .ready() called.
$('input[type="datetime"]').setNow();
});

Answer 3

The accepted answer seems pretty complicated to me... here a shorter solution that doesn't need jQuery
JSFiddle: https://jsfiddle.net/rzaceg8v/
window.addEventListener("load", function() {
var now = new Date();
var utcString = now.toISOString().substring(0,19);
var year = now.getFullYear();
var month = now.getMonth() + 1;
var day = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var localDatetime = year + "-" +
(month < 10 ? "0" + month.toString() : month) + "-" +
(day < 10 ? "0" + day.toString() : day) + "T" +
(hour < 10 ? "0" + hour.toString() : hour) + ":" +
(minute < 10 ? "0" + minute.toString() : minute) +
utcString.substring(16,19);
var datetimeField = document.getElementById("myDatetimeField");
datetimeField.value = localDatetime;
});
<input type="datetime-local" id="myDatetimeField"/>

Answer 4

The methods above worked but were too verbose for me.
Here's my version:
window.addEventListener("load", function() {
var now = new Date();
var offset = now.getTimezoneOffset() * 60000;
var adjustedDate = new Date(now.getTime() - offset);
var formattedDate = adjustedDate.toISOString().substring(0,16); // For minute precision
var datetimeField = document.getElementById("myDatetimeField");
datetimeField.value = formattedDate;
});

Answer 5

This worked perfectly!
One note, I tried this the only month it would break, October. It would give me a '010', instead of 10.
month = (now.getMonth() +1 ).toString().length === 1 ? '0' + (now.getMonth() + 1).toString() : now.getMonth() + 1;

Answer 6

Big line works for me, if it doesn't for you you can introduce whitespaces and line breaks in the expressions.
function setDatetimeInput(element, t = new Date()){
function p(number){return number.toString().padStart(2, '0');}//number to 2 digit, 0 padded string
element.value = `${t.getFullYear()}-${p(t.getMonth()+1)}-${p(t.getDate())}T${p(t.getHours())}:${p(t.getMinutes())}`;
}

Answer 7

here's a simple way:
<input type="datetime-local" id="cal">
const currentDateTime = () => {
var tzoffset = new Date().getTimezoneOffset() * 60000; //offset in milliseconds
var localISOString = new Date(Date.now() - tzoffset)
.toISOString()
.slice(0, -1);
// convert to YYYY-MM-DDTHH:MM
const datetimeInputString = localISOString.substring(
0,
((localISOString.indexOf("T") | 0) + 6) | 0
);
console.log(datetimeInputString);
return datetimeInputString;
};
document.getElementById('cal').value = currentDateTime();