Question

我正在尝试使用HTML和CSS创建范围滑块。

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

我查看了范围滑块的代码，发现了这一点，

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

就我想要的而言，这很完美，但我希望最小值和最大值为日期。可以说我希望滑块的范围是2018-05-29和2018-06-25。

我不确定如何做到这一点...

Answer 1

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

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

，脚本应类似于：

<script>
    $(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());
    });
</script>

在此处查看实际操作：https://codepen.io/2rod/pen/JtIki

Answer 2

您应该尝试使用this插件。我认为这正是您需要的。

<!DOCTYPE>
  <html>
  <head>
    <meta charset="utf-8"/>
    <title>example</title>
    <link rel="stylesheet" href="css/iThing.css" type="text/css" />
  </head>
  <body>
    <h1>Hello world</h1>
    <div id="slider"></div>
    <script src="jquery.js"></script>
    <script src="jquery-ui.custom.js"></script>
    <script src="jQDateRangeSlider-min.js"></script>
    <script>
    //<!--
      $("#slider").dateRangeSlider();
    //-->
    </script>
  </body>
</html>

这是插件的基本用法。不幸的是，如果该链接无法访问，则它是第三方插件，您也可能会丢失该插件。

为日期创建范围滑块

2 个答案: