Setting value of datetime-local from Date

Question

I would like to set the value of a datetime-local input with the current date and time. Right now I have an ugly solution that involves slicing the first 17 characters. In addition it sets the time in GMT instead of the local time. My code is as follows:

<input type="datetime-local" name="name" id="1234">  <script type="text/javascript">   var d = new Date();   var elem = document.getElementById("1234");    elem.value = d.toISOString().slice(0,16); </script> 

I have two problems with this code:

1. Is there a way to convert from a Date to a legal value without manually slicing the string?
2. I would like the string to be displayed in the datetime-local as DD/MM/YYYY, hh:mm (e.g. 05/11/2015, 14:10 it is 13:10 in GMT but I am in GMT+1 so I want to display 14:10). What is currently displayed is 05/11/2015, 01:10 PM. I would like to remove the PM and display in local time.

This might be an XY problem, so if I am doing it completely wrong and there is a better way to display datetime pickers in html, I would be happy to hear.

Answer 1

I ended up subtracting getTimezoneOffset minutes to adjust the toISOString value:

var now = new Date();  now.setMinutes(now.getMinutes() - now.getTimezoneOffset());  document.getElementById('dt').value = now.toISOString().slice(0,16);

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

Answer 2

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