如何在jQuery UI的datetimepicker上設置'Now'按鈕來設置UTC時間？

Question

我使用datetimepicker here。我該如何設置now按鈕，以便現在設置時間UTC而不是每個瀏覽器現在的當前時間？

Answer 1

這工作設置的時間，但沒有太多設置日曆上的實際日期。

$.datepicker._gotoToday = function (id) { 
    var inst = this._getInst($(id)[0]), 
    $dp = inst.dpDiv; 
    this._base_gotoToday(id); 
    var tp_inst = this._get(inst, 'timepicker'); 
    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(); 
}; 

Answer 2

打開你的jQuery timepicker插件文件，然後轉到下面的函數

/* 
* 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(); 
}; 

，只需添加下面的變化，

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 3

我也有類似的問題，我到底必須用自定義的替換「now」按鈕。這是令人討厭的，我知道，但否則你可能需要觸摸每個新版本的圖書館。

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); 
    }; 

Answer 4

我的解決辦法是從underscore.js的_.wrap方法來包裝原始的日期選擇器的功能_gotoToday，然後讓時間調整。

$.datepicker._gotoToday = _.wrap($.datepicker._gotoToday, function (originalHandler) { 
    originalHandler.apply(this, _.rest(arguments)); 
    //utc adjustment: 
    var date = new Date(); 
    date.setMinutes(date.getMinutes() + date.getTimezoneOffset()); 
    element.datetimepicker('setDate', date); 
}); 

Answer 5

查找並替換此代碼，它顯示當前點擊現在的當前時間按鈕。

/* 
* override "Today" button to also grab the time and set it to input field. 
*/ 
$.datepicker._base_gotoToday = $.datepicker._gotoToday; 
$.datepicker._gotoToday = function(id) { 
    var inst = this._getInst($(id)[0]); 
    this._base_gotoToday(id); 
    var tp_inst = this._get(inst, 'timepicker'); 
    var tzoffset = $.timepicker.timezoneOffsetNumber(tp_inst.timezone); 
    var now = new Date(); 
    var utcNow = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), now.getMinutes(), now.getSeconds()); 
    this._setTime(inst, utcNow); 
    tp_inst._onSelectHandler(); 
}; 

Answer 6

仍然是許多問題......雖然您可以更改源代碼總是使用UTC時間，它不是在許多情況下的解決方案，因爲你可能需要兩UTC的功能和標準（當地時間）功能在同一頁面..所以..我的解決方案是這個隱藏UTC時間選擇器類型的現在按鈕。

備註！它不是完美的，我知道，因爲現在按鈕顯示後超時會觸發，它可能會產生一個短暫的「眨眼」..但它對我來說還可以。它隱藏了我需要的選擇器中的「now按鈕」，而且我不需要更改datetimepicker腳本！

// hides the "now" button (as fast as possible) for the 
    // datetimepickerUTC, as that button only works with local time! 
    var datetimepickerUTCNowHider = function(currentDateTime){ 
     setTimeout(function() { 
      $('.datetimepickerUTC').datepicker("widget").find(".ui-datepicker-current").hide(); 
     }, 0.001); 
    }; 

    //the utc time 
    var dateNow = new Date(); 
    var utc = new Date(dateNow.getTime() + dateNow.getTimezoneOffset() * 60000); 

    // the datetimepicker 
    $('.datetimepickerUTC').datetimepicker({    
     dateFormat: 'yymmdd', 
     timeFormat: 'HH:mm', 
     controlType: 'select', 
     hour: utc.getHours(), 
     minute: utc.getMinutes(), 
     beforeShow: datetimepickerUTCNowHider, 
     onSelect: datetimepickerUTCNowHider, 
     showWeek: true  
    });