How can I get bootstrap-datepicker to return UTC timestamps rather than timestamps based on the user's timezone?

I'm using version 1.8.0 of bootstrap-datepicker

Here's an example which displays the timestamp returned by bootstrap-datepicker when a date is selected:

HTML

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="input-group date">
        <input type="text" class="form-control" id="js-date">
        <div class="input-group-addon">
          <span class="glyphicon glyphicon-th"></span>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <span id="timestamp-output"></span>
  </div>
</div>

JavaScript

$(document).ready(function() {
  $('#js-date').datepicker();
});

$('#js-date').datepicker().on('changeDate', function (ev) {
  $('#timestamp-output').text(ev.date.getTime());
});

Fiddle Example

bootstrap-datepicker example

Output

When you run the example and select the date 11/29/2018, the timestamp displayed is 1543478400000, which corresponds to:

GMT: Thursday, November 29, 2018 8:00:00 AM

What I need is for it to instead return the timestamp 1543449600000, which corresponds to:

GMT: Thursday, November 29, 2018 12:00:00 AM

Summary

Is there a configuration option in bootstrap-datepicker for this? Or perhaps some reliable way to convert the returned localized timestamp into a UTC timestamp?

How can I get bootstrap-datepicker to return UTC timestamps rather than timestamps based on the user's timezone?

I'm using version 1.8.0 of bootstrap-datepicker

Here's an example which displays the timestamp returned by bootstrap-datepicker when a date is selected:

HTML

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="input-group date">
        <input type="text" class="form-control" id="js-date">
        <div class="input-group-addon">
          <span class="glyphicon glyphicon-th"></span>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <span id="timestamp-output"></span>
  </div>
</div>

JavaScript

$(document).ready(function() {
  $('#js-date').datepicker();
});

$('#js-date').datepicker().on('changeDate', function (ev) {
  $('#timestamp-output').text(ev.date.getTime());
});

Fiddle Example

bootstrap-datepicker example

Output

When you run the example and select the date 11/29/2018, the timestamp displayed is 1543478400000, which corresponds to:

GMT: Thursday, November 29, 2018 8:00:00 AM

What I need is for it to instead return the timestamp 1543449600000, which corresponds to:

GMT: Thursday, November 29, 2018 12:00:00 AM

Summary

Is there a configuration option in bootstrap-datepicker for this? Or perhaps some reliable way to convert the returned localized timestamp into a UTC timestamp?

• javascript
• twitter-bootstrap
• timestamp
• utc
• bootstrap-datepicker

• bootstrap-datepicker.readthedocs.io/en/stable/… – Heretic Monkey Commented Nov 29, 2018 at 21:38

2 Answers 2

You may want to look at Moment.js. Updated I convert a local to UTC timestamp.

$(document).ready(function() {
  $('#js-date').datepicker();
});

$('#js-date').datepicker().on('changeDate', function (ev) {
  
  var datetime = new Date(ev.date.getTime());
  // Convert local timestamp to UTC timestamp
  var local = moment(datetime).valueOf();
  var utc = (moment(datetime).add(-(moment().utcOffset()), 'm'));
  utc = moment.parseZone(utc).utc().valueOf();
  
  $('#timestamp-local').text('Local Timestamp is ' + local);
  $('#timestamp-utc').text('UTC Timestamp is ' + utc);
  
  console.log('UTC Offset is ' + moment().utcOffset());
});

<script src="https://rawgit./moment/moment/2.22.2/min/moment.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="input-group date">
        <input type="text" class="form-control" id="js-date">
        <div class="input-group-addon">
          <span class="glyphicon glyphicon-th"></span>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <span id="timestamp-local"></span><br/>
    <span id="timestamp-utc"></span>
  </div>
</div>

Per this documentation call:

getUTCDate()

Also Via Javascript:

var date = new Date(ev.date.getTime() + (60000 * date.getTimezoneOffset()));