html - 为日期创建范围 slider

Question

我正在尝试使用 HTML 和 CSS 创建一个范围 slider 。

我希望范围在两个日期之间。

我查找了范围 slider 的代码并找到了这个，

<form method="post" action="/action_page_post.php">
  <div data-role="rangeslider">
    <label for="price-min">Price:</label>
    <input type="range" name="price-min" id="price-min" value="200" min="0" max="1000">
    <label for="price-max">Price:</label>
    <input type="range" name="price-max" id="price-max" value="800" min="0" max="1000">
  </div>
    <input type="submit" data-inline="true" value="Submit">
    <p>The range slider can be useful for allowing users to select a specific price range when browsing products.</p>
  </form>

就我想要的而言，这是完美的，但我希望最小值和最大值是日期。假设我希望 slider 的范围为 2018-05-29 和 2018-06-25。

我不知道如何做到这一点......

Answer 1

您可以在 Rod Reyes 提供的 CodePen 中使用此示例。它使用 jquery-ui 插件。

 $(function () {
            $("#slider-range").slider({
                range: true,
                min: new Date('2010.01.01').getTime() / 1000,
                max: new Date('2014.01.01').getTime() / 1000,
                step: 86400,
                values: [new Date('2013.01.01').getTime() / 1000, new Date('2013.02.01').getTime() / 1000],
                slide: function (event, ui) {
                    $("#amount").val((new Date(ui.values[0] * 1000).toDateString()) + " - " + (new Date(ui.values[1] * 1000)).toDateString());
                }
            });
            $("#amount").val((new Date($("#slider-range").slider("values", 0) * 1000).toDateString()) +
                " - " + (new Date($("#slider-range").slider("values", 1) * 1000)).toDateString());
        });

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<p>
    <label for="amount">Date range:</label>
    <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" size="100" />
</p>
<div id="slider-range"></div>

也可以在这里看到它的实际效果:https://codepen.io/2rod/pen/JtIki