How to set the "Now" button in jQuery UI datetimepicker to set UTC time?

Question

I am using datetimepicker here . How can I set the now button to now set the UTC time instead of the current current browser?

Answer 1

This worked to set the time, but not to set the actual date on the calendar.

$.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

Open the jQuery timepicker add-ons file and go to the next 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 just add the following 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 3

I had a similar problem, in the end I had to replace the "now" button with the usual one. This is unpleasant, I know, but otherwise, you may have to touch the library in 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); }; 

Answer 4

My solution is to wrap the original datepicker _gotoToday function using the _.wrap method from underscore.js , and then adjust the time.

 $.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

Find and replace this code, it displays the current local time after clicking the "now" button.

 /* * 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

Still a problem for many ... although you can change the source code to always use UTC time, this is not a solution in many cases, since you may need both UTC functionality and standard (local time) functionality on the same page. . therefore .. My solution is to hide the button now in UTC timepicker types.

Note ! it is not perfect, I know, since the timeout is triggered after the “now” button is displayed, this may give a short “blinking” .. but this is normal for me. It hides the "now" button in the collectors I need, and I don't need to change the datetimepicker script!

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