Geek asks and answers

How to get utc time in jQuery datetimepicker

I am trying to use this jQuery datetimepicker to get date and time data. I can get most things (format, display, etc.). However, I could not get the date and time in UTC. I can only get the date and time in local format.

Does anyone know how to change it to get date and time? or delete the "Now" button in the popup?

+5
source share
3 answers

Today I came across the same question 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();
};
+4
source

:

Live Demo: http://jsfiddle.net/Dgnjn/5/

$('#timePicker').datetimepicker({
    dateFormat: 'dd-mm-yy',
    timeFormat: 'hh:mm:ss',
    stepHour: 2,
    stepMinute: 10,
    onSelect: function(dateText, inst) { 
     var dateAsString = dateText;
     var dateAsObject = $(this).datepicker( 'getDate' );
     dateAsObject = $.datepicker.formatDate('mm-dd-yy', new Date(dateAsObject))
         alert(dateAsObject);
    }
});
+1

Without any additional libs, you can use the following utility methods 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 that 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"
Run codeHide result

but the answer would not be complete without mentioning moment.js , which simplifies date handling.

0
source

More articles:


All Articles