How to set 'Now' button on jquery UI datetimepicker to set UTC time?

Question

I'm using the datetimepicker here. How can I set the now button so that it sets time UTC now instead of the current now per browser?

Answer 1

Open your jQuery timepicker addon file and go to the following function

/*
* override "Today" button to also grab the time.
*/
$.datepicker._base_gotoToday = $.datepicker._gotoToday;
$.datepicker._gotoToday = function (id) {
    var inst = this._getInst($(id)[0]),
        $dp = inst.dpDiv;
    this._base_gotoToday(id);
    var tp_inst = this._get(inst, 'timepicker');
    selectLocalTimezone(tp_inst);
    var now = new Date();
    this._setTime(inst, now);
    $('.ui-datepicker-today', $dp).click();
};

and simply add the below change,

var now = new Date();
var utcNow = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());
this._setTime(inst, utcNow);

Answer 2

I had a similar problem, in the end I had to replace the "now" button with a custom one. It is nasty I know but heck otherwise you would probably need to touch the library on each new version.

    window.date = "<?php echo $time; ?>";

    Date.prototype.addHours = function(h) {    
        this.setTime(this.getTime() + (h*60*60*1000)); 
        return this;   
    }
    var previous_time = new Date();
    previous_time.addHours(-1);
    var cur_time = new Date();
    $(".timepicker_from").datetimepicker({
        dateFormat: "mm/dd/yy",
        timeFormat: 'hh:mm:ss',
        showSecond: true,
        hour: previous_time.getUTCHours(),
        minute: previous_time.getUTCMinutes()
    });

    $('.timepicker_from').focus(function(){
        var timezone = jstz.determine();
        $('#timezone').val(timezone.name());
          $( ".ui-datepicker-current" ).replaceWith('<button type="button" style="float: left; margin: .5em .2em .4em; \n\
                                                                               cursor: pointer; padding: .2em .6em .3em .6em;\n\
                                                                               width:auto; overflow:visible;" onclick="set_utc_time_from(date);" > Now </button>' );
    });

    $( ".timepicker_to" ).datetimepicker({
        dateFormat: "mm/dd/yy",
        timeFormat: 'hh:mm:ss',
        showSecond: true,
        hour: cur_time.getUTCHours(),
        minute: cur_time.getUTCMinutes()
    });

    $('.timepicker_to').focus(function(){
        $( ".ui-datepicker-current" ).replaceWith('<button type="button" style="float: left; margin: .5em .2em .4em; \n\
                                                                               cursor: pointer; padding: .2em .6em .3em .6em;\n\
                                                                               width:auto; overflow:visible;" class="" onclick="set_utc_time_to(date);"> Now </button>' );
    });

    function set_utc_time_from(utc){
        var $from = $('input#cdr_from').val(utc);
    };

    function set_utc_time_to(utc){
        var $from = $('input#cdr_to').val(utc);
    };