更改为 24 小时。 DateRangeFilter 的模式

Change to 24h. mode of DateRangeFilter

我在 Google 脚本可视化仪表板中有一个 DateRangeFilter,但是当我设置它时显示为

17/12/23 02:31:43 PM

而不是

17/12/23 14:31:43

我当前的代码是:

    var timestamp = new google.visualization.ControlWrapper({
    controlType: 'DateRangeFilter',
    containerId: 'timestamp_div',
    options: {
         filterColumnIndex: 0,
         ui:{ step: 'second'}
    }
});

怎么改成24小时。模式?提前致谢。

您可以使用 ui.format 选项...

这应该是一个对象,具有以下属性...

formatType - A quick formatting option for the date. The following string values are supported, reformatting the date February 28, 2016 as shown:
'short' - Short format: e.g., "2/28/16"
'medium' - Medium format: e.g., "Feb 28, 2016"
'long' - Long format: e.g., "February 28, 2016"

pattern - A custom format pattern to apply to the value, similar to the ICU date and time format. You cannot specify both formatType and pattern.

timeZone - The time zone in which to display the date value. This is a numeric value, indicating GMT + this number of time zones (can be negative).

这里使用了pattern属性...

      ui: {
        format: {
          pattern: 'MM/dd/yyyy HH:mm:ss'
        },
        step: 'second'
      }

要获得 24 小时格式,请使用大写字母 H 作为小时段 --> HH
(小写会给出 12 小时格式)

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['controls']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addRows([
    [new Date(2017, 11, 28, 14, 31, 43)],
    [new Date(2017, 11, 29, 15, 32, 44)],
    [new Date(2017, 11, 30, 16, 33, 45)],
    [new Date(2017, 11, 31, 17, 34, 46)],
    [new Date(2018, 0, 1, 18, 35, 47)],
    [new Date(2018, 0, 2, 19, 36, 48)]
  ]);

  var timestamp = new google.visualization.ControlWrapper({
    controlType: 'DateRangeFilter',
    containerId: 'timestamp_div',
    dataTable: data,
    options: {
      filterColumnIndex: 0,
      ui: {
        format: {
          pattern: 'MM/dd/yyyy HH:mm:ss'
        },
        step: 'second'
      }
    }
  });
  timestamp.draw();
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timestamp_div"></div>