How to set datetime on datetime-local via jQuery

Question

I have datetime-local html control on my form and I need to set date and time on it dynamically via JS or jQuery. How can I do it?

Answer 1

This component is messed up because it's not specified properly yet. Implementations are likely to be quirky as well.

The right way to do it should be to pass a date object, with JS and DOM it would make no sense to not have this. Doing things with string manipulation is going to invoke Zalgo. Sooner or later it will break with the locale or timezone.

I have looked for something like this and in Chrome 46 found:

$('input[type=datetime-local]').prop('valueAsNumber', Math.floor(new Date() / 60000) * 60000); // 60seconds * 1000milliseconds

If you don't remove the second and milliseconds they will show in the input field.

There is a valueAsDate property as well but mysteriously:

Uncaught DOMException: Failed to set the 'valueAsDate' property on 'HTMLInputElement': This input element does not support Date values.

So they haven't finished implementing it yet or choose a bad name for that property (it shows as null even when something is set though).

Answer 2

If you want to set the current date, then you can try this:

__Method 1:__

$(document).ready(function(){
    $('input[type=datetime-local]').val(new Date().toJSON().slice(0,19));
});

__Method 2:__

function zeroPadded(val) {
  if (val >= 10)
    return val;
  else
    return '0' + val;
}

$(document).ready(function(){
  d = new Date();
  $('input[type=datetime-local]').val(d.getFullYear()+"-"+zeroPadded(d.getMonth() + 1)+"-"+zeroPadded(d.getDate())+"T"+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds());
});

Note: You can replace $('input[type=datetime-local]') with Id or Name or Class of the datetime-local field.

EDIT: d.getMonth() returns a value between 0-11, so to input the proper month 1 needs to be added to the result.

Answer 3

I wrote a jQuery method that sets the current UTC time. It's useful for initializing datetime and datetime-local input fields.

Here's how you would use it to initialize a field.

$('input[type="datetime"]').setNow();

Or pass an argument of true to only set fields with no value.

$('input[type="datetime"]').setNow(true);

Answer 4

Here's a solution in formatting the date using momentjs.
This will get the current date and time

moment().format('YYYY-MM-DDThh:mm:ss.SSS')

Answer 5

Here is a simpler way to do it.

const now = (new Date().toLocaleString("sv-SE") + '').replace(' ','T');
console.log(now);

Answer 6

What about?

var now=new Date();
console.log(new Date(now.getTime()-now.getTimezoneOffset()*60000).toISOString().substring(0,19));