JQuery Date Time Picker加载对象数据时间戳

u1ehiz5o  于 2023-11-17  发布在  jQuery
关注(0)|答案(1)|浏览(127)

我如何使用jquery插入日期/时间选择器(德语格式的开始和结束日期+时间),并且当选择此选项时,对象字段将重新加载Grafana Jmeter 板和所选时间戳(例如1697407200000 & to =1697493599000)?
理想情况下,此时间格式也可以是对象数据上方的纯文本德语格式,例如25.10.23 00:00 - 25.10.23. 23:59
非常感谢

<html>
<head>

    <link rel="stylesheet" href="css/print.css" type="text/css" media="print"/>

</head>
<body>

<button onclick="window.print()">Print complete Website</button>

<br>
<br>

<object 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>

</body>
</html>

字符串

hmmo2u0o

hmmo2u0o1#

我希望我理解你的问题。如果你有更多关于如何使用jQuery日期选择器的问题,你可以去datepicker docs
这就是我所做的。这将更新Grafana Jmeter 板的数据属性。您可以添加/删除格式日期字符串,因为你的愿望,我从这里的日期格式的例子。
最后进场。

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<button onclick="window.print()">Print complete Website</button>

<br>
<br>
<p>
    Format options:<br>
    <select id="format">
        <option value="mm/dd/yy">Default - mm/dd/yy</option>
        <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
        <option value="d M, y">Short - d M, y</option>
        <option value="d MM, y">Medium - d MM, y</option>
        <option value="DD, d MM, yy">Full - DD, d MM, yy</option>
        <option value="&apos;day&apos; d &apos;of&apos; MM &apos;in the year&apos; yy">With text - &apos;day&apos; d &apos;of&apos; MM &apos;in the year&apos; yy</option>
    </select>
</p>

<object id="myObj" data=""
        style="height: 100%; width:100%" type="text/html">
    Grafana Dashboard
</object>
<label>From</label>
<input type="text" autocomplete="off" id="startDate" />
<br />
<label>To</label>
<input type="text" autocomplete="off" id="endDate" />

<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<script type="text/javascript">
    var dataObj = "https://grafana/d/test/test?0=k&1=i&2=o&3=s&4=k&orgId=1&from={0}&to={1}&fromPlain={2}&toPlain={3}";
    $.datepicker.setDefaults($.datepicker.regional["de"]);

    $("#format").on("change", function () {
        $("#startDate").datepicker("option", "dateFormat", $(this).val());
        $("#endDate").datepicker("option", "dateFormat", $(this).val());
    });

    $("#startDate").datepicker({
        onSelect: function (a, b, c) {
            var now = new Date(b.currentYear, b.currentMonth, b.currentDay);
            var attrText = dataObj.replace('{0}', now.getTime());
            var attrText = attrText.replace('{2}', now.toDateString());

            var endDate = $("#endDate").datepicker('getDate');
            if (endDate != null) {
                attrText = attrText.replace('{1}', endDate.getTime());
                attrText = attrText.replace('{3}', endDate.toDateString());
            }

            $("#myObj").attr("data", attrText);
        }
    });
    

    $("#endDate").datepicker({
        onSelect: function (a, b, c) {
            var now = new Date(b.currentYear, b.currentMonth, b.currentDay);
            var attrText = dataObj.replace('{1}', now.getTime());
            var attrText = attrText.replace('{3}', now.toDateString());

            var startDate = $("#startDate").datepicker('getDate');
            if (startDate != null) {
                attrText = attrText.replace('{0}', startDate.getTime());
                attrText = attrText.replace('{2}', startDate.toDateString());
            }

            $("#myObj").attr("data", attrText);
        }
    });

</script>

字符串

相关问题