JavaScript get UTC from local midnight

Question

I have a date that comes from a Bootstrap DateTimePicker $('#datetimepicker').find("input").val() that has the format "mm/dd/yyyy".

<div class='input-group date' id='datetimepicker'>
  <form autocomplete="off" onkeydown="return event.key != 'Enter';">
      <input type='text' autofill="off" readonly class="form-control" />
  </form>
  <span class="input-group-addon">
     <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

I'm trying to get the UTC date and time for the selected date, at midnight, using Moment js:

moment.utc($('#datetimepicker').find("input").val()).tz(timezone).format('YYYY-MM-DD HH:mm:ss')

For example, starting date from the picker is 01/21/2022 and the timezone is America/Phoenix which is UTC-7.

I should have 2022-01-21 07:00:00 but my code returns 2022-01-20 17:00:00.

What am I doing wrong? Is there a way to get the UTC time for a day at 00:00 time, just by knowing the timezone?

"local midnight" as in "2022-01-21T00:00" or "2022-01-21T24:00" (yes I know there is no 24:00 but just to illustrate my point) — derpirscher, Jan 21 '22 at 15:18
Why is your input of type "text"? And also be aware, that momentjs will throw a deprecation warning if you pass in a date in "mm/dd/YYYY" format and don't provide a respective format string. — derpirscher, Jan 21 '22 at 16:04

derpirscher · Accepted Answer · 2022-01-21T15:54:57.173

You have to create the timestamp in your local timezone first, and then convert it to UTC. You are doing it the other way around. Ie if I split up your code snippet, you are doing the following

let thedate = $('#datetimepicker').find("input").val();
let utcdate = moment.utc(thedate);
let localdate = utcdate.tz(timezone);

Thus, the timezone offset is, of course, added in the wrong direction ...

Try the following

function getTime() {
  let thedate = $('#thedate').val();
  console.log(thedate)
  
  // create a timestamp in the respective timezone
  let localdate = moment.tz(thedate, "America/Phoenix");
  // convert it to utc
  let utcdate = localdate.utc();
  // format the timestamp
  console.log(utcdate.format("YYYY-MM-DD HH:mm:ss"));
}

<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://momentjs.com/downloads/moment-timezone-with-data.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="thedate" type="date">
<input type="button" onClick="getTime()" value="Get Time">

JavaScript get UTC from local midnight

1 Answers1