JQuery Month slider is not working

Question

I am referring this article and trying to create a month slider without range. I want to remove range from this slider as I just need a month and year. Please find below my updated code.

    function formatDate(date) {
      var monthNames = [
        "January", "February", "March",
        "April", "May", "June", "July",
        "August", "September", "October",
        "November", "December"
      ];
    
      var monthIndex = date.getMonth();
      var year = date.getFullYear();
    
      return monthNames[monthIndex] + ' ' + year;
    }
    $(document).ready(function() {
        $("#range-slider").slider({
          range: "min",
          min: new Date('2012-01-01T00:00:00').getTime(),
          max: new Date('2019-01-01T00:00:00').getTime(),
          step: 86400000,
          value:new Date('2015-03-01T00:00:00').getTime() ,
            slide: function(event, ui) {
        
                $( "#amount" ).val( formatDate(new Date(ui.values[1])));
            }
        });
    
    });

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
<p>
  <label for="amount">date range:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;width:400px;">
</p>
 
<div id="range-slider"></div>

It works fine if I replace

value:new Date('2015-03-01T00:00:00').getTime() ,

to

values: [ new Date('2015-03-01T00:00:00').getTime(),new Date('2015-03-01T00:00:00').getTime() ],

Please let me know what is wrong in this code.

Answer 1

function formatDate(date) {
      var monthNames = [
        "January", "February", "March",
        "April", "May", "June", "July",
        "August", "September", "October",
        "November", "December"
      ];
    
      var monthIndex = date.getMonth();
      var year = date.getFullYear();
    
      return monthNames[monthIndex] + ' ' + year;
    }
    $(document).ready(function() {
        $("#range-slider").slider({
          range: "min",
          min: new Date('2012-01-01T00:00:00').getTime(),
          max: new Date('2019-01-01T00:00:00').getTime(),
          step: 86400000,
          value:new Date('2015-03-01T00:00:00').getTime() ,
            slide: function(event, ui) {
                // There was a mistake here
                // $( "#amount" ).val( formatDate(new Date(ui.values[1])));

                $( "#amount" ).val( formatDate(new Date(ui.value)));
            }
        });
    
    });

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
<p>
  <label for="amount">date range:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;width:400px;">
</p>
 
<div id="range-slider"></div>

Try this :)