How to obtain utc time in jQuery datetimepicker

Question

I am using the trying this jQuery datetimepicker to obtain date and time data. I am able to get most of the things out (format, display, etc). However, I wasn't able to get the date and time in UTC format. I am only able to obtain the date and time in local format.

Does anyone know how to modify it to get the date and time? or remove off the "Now" button in the popup?

Solution 1

I ran into the same issue today, and found this old thread. You can override $.datepicker._gotoToday to use UTC Time when you click the "now" button.

//make the now button go to "now" in utc, not local
$.datepicker._gotoToday = function(id) {
  var inst = this._getInst($(id)[0]),
      $dp = inst.dpDiv;
  this._base_gotoToday(id);
  var tp_inst = this._get(inst, 'timepicker');
  //removed -> selectLocalTimeZone(tp_inst);
  var now = new Date();
  var now_utc = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(),  now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());
  this._setTime(inst, now_utc);
  $('.ui-datepicker-today', $dp).click();
};

Solution 2

Without any extra libs you can use the utility methods below to do the following:

var dateFromPicker = getDateFromPicker();
var dateUtc = localAsUtc(dateFromPicker);
var iso = dateUtc.toISOString(); // returns "2016-12-06T00:00:00.000Z"

/**
 * <b>WARNING</b>: This method should only be used in conjunction with components that handle local dates (i.e. date pickers).
 *
 * Returns a local date constructed from a UTC date (shifts the time by the local time zone). E.g.:
 * <ul><li>2016-01-01T00:00Z (UTC) -> 2016-01-01T00:00-0100 (CVT)
 *     <li>2016-01-01T00:00Z (UTC) -> 2016-01-01T00:00+0100 (CET)
 * </ul>
 * @param date a date in UTC time zone
 * @returns {Date} the same date & time in the local time zone
 */
function utcAsLocal(date) {
    if (isNotValidDate(date)) {
        return null;
    }

    return new Date(
        date.getUTCFullYear(),
        date.getUTCMonth(),
        date.getUTCDate(),
        date.getUTCHours(),
        date.getUTCMinutes(),
        date.getUTCSeconds(),
        date.getUTCMilliseconds()
    );
}

/**
 * <b>WARNING</b>: This method should only be used in conjunction with components that handle local dates (i.e. date pickers).
 *
 * Returns a UTC date constructed from a local date (shifts the time by the local time zone). E.g.:
 * <ul><li>2016-01-01T00:00-0100 (CVT) -> 2016-01-01T00:00Z (UTC)
 *     <li>2016-01-01T00:00+0100 (GMT) -> 2016-01-01T00:00Z (UTC)
 * </ul>
 * @param date a date in UTC time zone
 * @returns {Date} the same date & time in the UTC time zone
 */
function localAsUtc(date) {
    if (isNotValidDate(date)) {
        return null;
    }

    return new Date(Date.UTC(
        date.getFullYear(),
        date.getMonth(),
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
        date.getMilliseconds()
    ));
}

function isValidDate (date) {
    return !isNotValidDate(date);
}

function isNotValidDate(date) {
    return date == null || isNaN(date.getTime());
}

Here are a few examples which simulate time zones before and after UTC:

var date;

// simulate a datepicker in (CET)
date = new Date("2016-12-06T00:00:00.000+0100");
date.toISOString(); // "2016-12-05T23:00:00.000Z"
date = localAsUtc(date);
date.toISOString(); // "2016-12-06T00:00:00.000Z" sent to server

// simulate a datepicker in (CVT)
date = new Date("2016-12-06T00:00:00.000-0100");
date.toISOString(); // "2016-12-06T01:00:00.000Z"
date = localAsUtc(date);
date.toISOString(); // "2016-12-06T00:00:00.000Z" sent to server

// setting the datepicker date (CET)
date = new Date("2016-12-06T00:00:00.000Z"); // received from server
date.toISOString(); // "2016-12-06T00:00:00.000Z"
date = utcAsLocal(date); // set datepicker with this date shows (06/12/2016)
date.toISOString(); // "2016-12-05T23:00:00.000Z"

// setting the datepicker date (CVT)
date = new Date("2016-12-06T00:00:00.000Z"); // received from server
date.toISOString(); // "2016-12-06T00:00:00.000Z"
date = utcAsLocal(date); // set datepicker with this date shows (06/12/2016)
date.toISOString(); // "2016-12-06T01:00:00.000Z"

but the answer wouldn't be complete without mentioning the moment.js which makes handling dates a heck of a lot easier.