如何在Grafana仪表盘的文本面板中设置时间范围

Great question! Since you already know how to fetch the current time range via timeSrv, setting it is just a matter of using the same service's setTime() method. Here's a practical, ready-to-use implementation you can drop right into a Grafana text panel:

<div style="padding: 15px;">
  <h4>Quick Time Range Controls</h4>
  <div style="margin-bottom: 10px;">
    <button onclick="setPresetRange('last1h')" style="margin-right: 8px;">Last 1 Hour</button>
    <button onclick="setPresetRange('last24h')" style="margin-right: 8px;">Last 24 Hours</button>
    <button onclick="setPresetRange('last7d')">Last 7 Days</button>
  </div>

  <div style="margin-top: 15px; padding-top: 10px; border-top: 1px solid #eee;">
    <h5>Custom Time Range</h5>
    <div style="margin: 8px 0;">
      <label style="display: inline-block; width: 120px;">Start (ISO UTC):</label>
      <input type="text" id="customStart" placeholder="2024-05-20T00:00:00Z" style="padding: 4px;">
    </div>
    <div style="margin: 8px 0;">
      <label style="display: inline-block; width: 120px;">End (ISO UTC):</label>
      <input type="text" id="customEnd" placeholder="2024-05-21T00:00:00Z" style="padding: 4px;">
    </div>
    <button onclick="setCustomTimeRange()">Apply Custom Range</button>
  </div>
</div>

<script>
// Helper to get the time service instance (matches your existing code pattern)
const getTimeService = () => {
  return angular.element('grafana-app').injector().get('timeSrv');
};

// Set preset time ranges using Grafana's built-in presets
function setPresetRange(presetKey) {
  const timeSrv = getTimeService();
  timeSrv.setTime(presetKey);
}

// Set a custom absolute time range
function setCustomTimeRange() {
  const startInput = document.getElementById('customStart');
  const endInput = document.getElementById('customEnd');
  
  const startValue = startInput.value.trim();
  const endValue = endInput.value.trim();
  
  if (!startValue || !endValue) {
    alert('Please fill in both start and end times in ISO UTC format!');
    return;
  }
  
  try {
    const timeSrv = getTimeService();
    timeSrv.setTime({
      from: new Date(startValue),
      to: new Date(endValue),
      raw: {
        from: startValue,
        to: endValue,
        mode: 'absolute'
      }
    });
  } catch (err) {
    alert('Invalid date format! Use ISO UTC like 2024-05-20T00:00:00Z');
    console.error('Time range error:', err);
  }
}
</script>

Key Details Explained: #

• Preset Ranges: The setTime() method accepts string identifiers for Grafana's built-in time presets (e.g., last1h, last7d, today, yesterday). You can find all valid preset keys by inspecting Grafana's time picker dropdown in your instance.
• Custom Ranges: For absolute custom ranges, pass an object with from/to Date objects plus a raw property that preserves the ISO string values and sets the mode to absolute—this ensures Grafana saves and displays the custom range correctly.
• Helper Function: The getTimeService() function reuses your existing approach to access the Angular-based timeSrv instance, which works in most Grafana versions (including v8+ where React is the default, since text panels still support Angular for backward compatibility).

Notes: #

• Ensure JavaScript execution in text panels is enabled (this is default behavior, but check your Grafana security settings if the controls don't work).
• Use UTC ISO dates (ending with Z) for consistent results across timezones.

内容的提问来源于stack exchange，提问作者Bhomik