CODEWITHSUNDEEP
htmlcss
MickeyTheMouse
MickeyTheMouse

Reputation: 419

Creating a range slider for dates

I'm trying to create a range slider using HTML and CSS.

I want the range to be between two dates.

I looked up the code for a range slider and found this,

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

This is perfect in terms of what I want, but I want the minimum and maximum values to be dates. Lets say I want the slider to range from 2018-05-29 and 2018-06-25.

I'm not sure how to make this happen...

Upvotes: 3

Views: 21529

Answers (2)

Maddie
Maddie

Reputation: 414

You can use this sample in CodePen provided by Rod Reyes. It's using jquery-ui plugin.

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

See it in action also here: https://codepen.io/2rod/pen/JtIki

Upvotes: 8

Gayan
Gayan

Reputation: 2860

You should try this plugin. I think this does exactly what you need. 

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

This is the basic usage of the plugin. Unfortunately it's a 3rd party plugin if the link went not accessible you may lose the plugin as well.

Upvotes: 0

Related Questions