如何用jQuery实现德语格式起止时间选择器并刷新Grafana Dashboard

下面是完整的实现代码，以及关键部分的说明：

完整代码 #

<html>
<head>
    <link rel="stylesheet" href="css/print.css" type="text/css" media="print"/>
    <!-- 引入jQuery UI样式 -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <!-- 引入jQuery UI核心 -->
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
    <!-- 引入jQuery UI德语本地化 -->
    <script src="https://code.jquery.com/ui/1.13.2/i18n/jquery-ui-i18n.min.js"></script>
</head>
<body>
    <button onclick="window.print()">Print complete Website</button>
    <br><br>

    <!-- 时间选择器区域 -->
    <div class="time-picker-group">
        <label>起始时间：</label>
        <input type="text" id="start-time">
        <label>结束时间：</label>
        <input type="text" id="end-time">
        <button id="update-dashboard">应用时间范围</button>
    </div>
    <br>
    <!-- 德语格式时间显示区 -->
    <div id="time-range-display" style="font-weight: bold;"></div>
    <br>

    <object id="grafana-container" data="https://grafana/d/test/test?0=k&1=i&2=o&3=s&4=k&orgId=1&from=1697407200000&to=1697493599000" style="height: 100%; width:100%" type="text/html">
        Grafana Dashboard
    </object>

    <script>
        $(function() {
            // 配置德语日期时间选择器
            $.datepicker.setDefaults($.datepicker.regional['de']);
            $('#start-time, #end-time').datepicker({
                dateFormat: 'dd.mm.yy',
                timeFormat: 'HH:mm',
                showTimepicker: true,
                changeMonth: true,
                changeYear: true
            });

            // 点击应用按钮更新Dashboard
            $('#update-dashboard').click(function() {
                const startTime = $('#start-time').val();
                const endTime = $('#end-time').val();

                if (!startTime || !endTime) {
                    alert('请选择完整的起止时间');
                    return;
                }

                // 转换为毫秒级时间戳
                const parseTime = (timeStr) => {
                    const [datePart, timePart] = timeStr.split(' ');
                    const parsedDate = $.datepicker.parseDate('dd.mm.yy', datePart);
                    const [hours, mins] = timePart?.split(':') || ['00', '00'];
                    parsedDate.setHours(hours, mins);
                    return parsedDate.getTime();
                };

                const fromTimestamp = parseTime(startTime);
                const toTimestamp = parseTime(endTime);

                // 更新显示文本
                $('#time-range-display').text(`${startTime} - ${endTime}`);

                // 更新Grafana链接
                const $grafana = $('#grafana-container');
                const baseUrl = $grafana.data('base-url') || $grafana.attr('data');
                const url = new URL(baseUrl);
                url.searchParams.set('from', fromTimestamp);
                url.searchParams.set('to', toTimestamp);
                $grafana.attr('data', url.toString());

                // 保存基准URL，避免后续修改重复叠加参数
                if (!$grafana.data('base-url')) {
                    $grafana.data('base-url', baseUrl);
                }
            });
        });
    </script>
</body>
</html>

关键部分说明 #

1. 依赖引入 #

• 用CDN引入了jQuery、jQuery UI及对应样式，还有德语本地化包，确保选择器的界面文字（月份、按钮）都是德语，日期格式符合德语习惯。
• 如果你的环境不能用CDN，可以把这些库下载到本地目录后引入。

2. HTML结构调整 #

• 新增了两个时间选择输入框和应用按钮，让用户选择起止时间。
• 加了time-range-display容器，专门用来展示德语格式的时间范围。
• 给原<object>加了id，方便jQuery快速定位修改。

3. 核心逻辑 #

• 初始化选择器：通过$.datepicker.setDefaults切换到德语区域，设置日期格式为dd.mm.yy，同时启用时间选择，支持选择具体时分。
• 时间转换：写了个小函数把用户选的德语格式时间转成Grafana需要的毫秒级时间戳，处理日期和时间的拆分与拼接。
• 更新Dashboard：解析原Grafana链接，替换from和to参数为新的时间戳，然后重新设置<object>的data属性，触发Dashboard重新加载；同时把选择的时间直接展示在页面上。

注意点 #

• 时区问题：默认用的是本地时区，如果需要UTC时间，修改parseTime函数里的日期处理逻辑即可。
• jQuery UI版本：确保用的是支持时间选择的版本，部分旧版可能需要额外插件。

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