html5 input default,HTML5 Input datetime-local default value of today and current time

问题

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

回答1:

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

Date:

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

});

回答2:

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;

});

回答3:

You can make it shorter:

window.addEventListener('load', () => {

const now = new Date();

now.setMinutes(now.getMinutes() - now.getTimezoneOffset());

document.getElementById('cal').value = now.toISOString().slice(0, -1);

});

回答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;

});

回答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;

回答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())}`;

}

来源：https://stackoverflow.com/questions/24468518/html5-input-datetime-local-default-value-of-today-and-current-time