Setting value of datetime-local from Date

The following function will take a date object (e.g. new Date()) and will return a string correctly formatted for <input type='datetime-local'>.

const dateForDateTimeInputValue = date => new Date(date.getTime() + new Date().getTimezoneOffset() * -60 * 1000).toISOString().slice(0, 19) 

The toISOString function is responsible of converting your local date (new Date) into GMT.

If you don't want to use GMT then slice, you need to use the pure Date constructor and all of the getX functions, where X is (days, month, year...)

In addition, you'll need to extend the Number object with a function that will help you to return 01 instead of 1 for example, to preserve the dd/mm/yyyy, hh/mm format.

Let me call this prototype function AddZero

 <input type="datetime-local" name="name" id="1234"> <script type="text/javascript"> Number.prototype.AddZero= function(b,c){ var l= (String(b|| 10).length - String(this).length)+1; return l> 0? new Array(l).join(c|| '0')+this : this; }//to add zero to less than 10, var d = new Date(), localDateTime= [(d.getMonth()+1).AddZero(), d.getDate().AddZero(), d.getFullYear()].join('/') +', ' + [d.getHours().AddZero(), d.getMinutes().AddZero()].join(':'); var elem=document.getElementById("1234"); elem.value = localDateTime; </script> 

See this

This is my solution to make it work with timestamps:

 function timestampToDatetimeInputString(timestamp) { const date = new Date((timestamp + _getTimeZoneOffsetInMs())); // slice(0, 19) includes seconds return date.toISOString().slice(0, 19); } function _getTimeZoneOffsetInMs() { return new Date().getTimezoneOffset() * -60 * 1000; } document.getElementById('dt').value = timestampToDatetimeInputString(Date.now()); 

<input id="dt" type="datetime-local" />

Since ES6(?) you can use .valueAsDate property:

const dateInput = document.querySelector('#date-input') const localDt =_=> // return local Date time { let now = new Date() now.setMinutes(now.getMinutes() - now.getTimezoneOffset()) now.setSeconds(0) // remove seconds now.setMilliseconds(0) // remove milliseconds return now } // usage : dateInput.valueAsDate = localDt() // init date value 

<input type="datetime-local" id="date-input" >

Leaning on others'...

<input id="myDateTime" type="datetime-local"> <script> var dateString = "7/15/20 7:9:00 PM" if (dateString !== "") { var dateVal = new Date(dateString); var day = dateVal.getDate().toString().padStart(2, "0"); var month = (1 + dateVal.getMonth()).toString().padStart(2, "0"); var hour = dateVal.getHours().toString().padStart(2, "0"); var minute = dateVal.getMinutes().toString().padStart(2, "0"); var sec = dateVal.getSeconds().toString().padStart(2, "0"); var ms = dateVal.getMilliseconds().toString().padStart(3, "0"); var inputDate = dateVal.getFullYear() + "-" + (month) + "-" + (day) + "T" + (hour) + ":" + (minute) + ":" + (sec) + "." + (ms); $("#myDateTime").val(inputDate); } </script> 

The value assigned to the input.val() MUST have every digit placeholder filled in YYYY-MM-DDThh:mm:ss.mss - see Proper format for datetime-local value

as Mdn said there is problem with client side time like this

function setValue(element, date) { var isoString = date.toISOString() element.value = isoString.substring(0, (isoString.indexOf("T")|0) + 6|0); } setValue(document.querySelector("#timelocal"), new Date())

<!--midnight of January 1st, 10000: the exact time of Y10K--> <input type="datetime-local" id="timelocal"/>

then you should always add

new Date().getTimezoneOffset() * 60 * 1000 

when you assign value to this element and minus when u read its value

function setValue(element, date) { date = new Date(date.getTime() - new Date().getTimezoneOffset() * 60 * 1000) var isoString = date.toISOString() element.value = isoString.substring(0, (isoString.indexOf("T")|0) + 6|0); } var el = document.querySelector("#timelocal"); setValue(el, new Date()) var correctDate = new Date( el.valueAsNumber + new Date().getTimezoneOffset() * 60 * 1000); console.log(correctDate.toString())

<input type="datetime-local" id="timelocal"/>

In 2023, it still doesn't have a native solution to format time elegantly. However, I can compose the format that datetime-local wants, YYYY-mm-ddTHH:MM.

• YYYY-mm-dd is the date
• T is the seperator of date and time
• HH:MM is for the hours and minutes

We convert a Date object and then assign it to the input's value.

const convertToDateTimeLocalString = (date) => { const year = date.getFullYear(); const month = (date.getMonth() + 1).toString().padStart(2, "0"); const day = date.getDate().toString().padStart(2, "0"); const hours = date.getHours().toString().padStart(2, "0"); const minutes = date.getMinutes().toString().padStart(2, "0"); return `${year}-${month}-${day}T${hours}:${minutes}`; } const currentTime = new Date() document.getElementById('1234').value = convertToDateTimeLocalString(currentTime) 

toISOString only shows the UTC time and other toLocaleString series methods are difficult and mysterious to be customized so I don't like to use them.

example :

 <TextField variant="standard" style={{width:"50%"}} //type='datetime-local' type='datetime-local' InputLabelProps={{ shrink: true }} defaultValue={new Date().toISOString().substring(0, (new Date().toISOString().indexOf("T")|0) + 6|0)} /> 

This might be overkill. If you want only what the OP asked for, jump to the last line, input.valueAsNumber...

/** * Store the given date and time into the given input element. * Everything will be displayed in local time, similar to dateAndTime.toString(). * * Going the other way is easy: `new Date(input.value)`. * @param input This should be set to "datetime-local". * @param dateAndTime The date and time to load into the input. */ export function loadDateTimeLocal(input : HTMLInputElement, dateAndTime : Date, truncateTo : "minutes" | "seconds" | "milliseconds" = "milliseconds") { // The element will remember this value. // If you store a time like '2021-12-08T14:23:01.001', the display and the editor will show seconds and milliseconds. // If you store a time like '2021-12-08T14:23:01.000' or '2021-12-08T14:23:01', the display and the editor will show seconds but not milliseconds. // If you store a time like '2021-12-08T14:23:00.000' or '2021-12-08T14:23', the display and the editor will show neither seconds nor milliseconds. // Changing the time using the GUI will not change which fields are displayed. // Note: Rounding or truncating will only remove fields, not add them. // If you want to display "14:23:00.000", and you want the user to be able to set the seconds via the GUI, I don't think that's possible. // Note: I didn't see this documented anywhere. I learned this by experimenting with Chrome. let truncateBy : number; switch (truncateTo) { case "minutes": { truncateBy = dateAndTime.getSeconds() * 1000 + dateAndTime.getMilliseconds(); break; } case "seconds": { truncateBy = dateAndTime.getMilliseconds(); break; } case "milliseconds" : { truncateBy = 0; break; } default: { throw new Error("wtf"); } } // This is conversion is surprisingly hard to do. Advice from MDN and others failed miserably. input.valueAsNumber = (+dateAndTime) - (dateAndTime.getTimezoneOffset() * 60000) - truncateBy; } 

I've just created a function to format new Date local time zone into datetime to insert it into mysql registry

const dateTime = new Date(); const dateTimeFormat = (dateTime) => { const localDateTime = dateTime.toLocaleString('en-GB') const dateTimeArray = localDateTime.split(',') const date = dateTimeArray[0].split('/').reverse().join('-') const time = dateTimeArray[1] return date + ' ' + time } 

Replace this line

elem.value = d.toISOString().slice(0,16); 

with

elem.value = d.toLocaleString(); 

This will still print "am/pm" at the end but it takes care of the time adjustment to local values.