Javascript input a UTC string

Question

I'm working on a project right now where I want to get an array of dates between two end points. I've got that code working perfectly when I hard code the start and end date in.

My problem is when I used an input, the code doesn't work. How can I convert a normal date input into a UTC string?

Here's an example of what I'm on about: https://jsfiddle.net/mksvh95y/5/

<input type="date" id="bubbles" placeholder = "enter date">

<button onclick="getDate()"> Click me to get date</button>


 <script>
   function getDate(){
       var water = document.getElementById("bubbles").value;
       alert(water);
       //alert(water.toUTCString());

       var fire = new Date (2018,10,15);
       alert(fire);
   }

I want the get the 'water' variable to be formatted like the 'fire' variable.

I saw there's .toUTCstring(), but that doesn't work

Answer 1

This is possibly a duplicate of Why does Date.parse give incorrect results, but here's an answer that may be more suitable.

The value of a date input is an ISO 8601 format date string in the format "YYYY-MM-DD", which is what you should see from:

alert(water); // something like 2018-06-21

The format of the string returned by Date.prototype.toString is implementation dependent (though ECMAScript 2019 will standardise it). That's the format you're getting from:

alert(fire) // e.g. Thu Jun 21 2018 00:00:00 GMT+1000 (AEST)

One fix is to convert the string from the date input to a Date, then use the default toString for both outputs. But your problem then is that parsing of the ISO 8601 date string is UTC, so the dates will be different by the host timezone offset, e.g.

console.log(new Date('2018-06-21').toString()); // 21 Jun 2018
console.log(new Date(2018, 5, 21).toString());  // 21 Jun 2018

So you need to parse the string from the input as local using a simple function like:

function parseISOLocal(s) {
  var b = s.split(/\D/);
  return new Date(b[0],b[1]-1,b[2]);
}

console.log(parseISOLocal('2018-06-21').toString());
console.log(new Date(2018, 5, 21).toString());

If you want to use a library like moment.js, it will parse ISO 8601 formatted date strings as local (which is consistent with ISO 8601), then convert it to a plain Date and use the default toString, e.g.

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

<input type="date"
 onchange="console.log(moment(this.value).toDate().toString())">

Answer 2

I strongly recommend using the excellent MomentJS library for date mainpulation, as native support is poor:

function getDate(){
   var water = document.getElementById("bubbles").value;
   var waterMoment = moment(water);
   alert(water.utc().format()); //outputs a UTC date string

   var fire = new Date (2018,10,15);
   alert(fire);
}

See the moment.utc() function and the moment.format() function for more details.