JQuery Month 滑块不起作用

Question

我指的是this 文章并尝试创建一个没有范围的月份滑块。我想从此滑块中删除范围，因为我只需要一个月和一年。请在下面找到我更新的代码。

    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>

如果我替换它会很好用

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

到

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

请告诉我这段代码有什么问题。

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>

试试这个:)

Answer 2

您想获得“月 - 年”视图

试试这个：

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

$(function() {
    $( "#slider-range" ).slider({
      range: false,
      min: new Date('2012-01-01T00:00:00').getTime(),
      max: new Date('2019-01-01T00:00:00').getTime(),
      step: 86400000,
      values: [new Date('2018-08-18T00:00:00').getTime()],
      slide: function( event, ui ) {
        $( "#amount" ).val( formatDate(new Date(ui.values[0])) );
      }
    });
    $( "#amount" ).val( formatDate((new Date($( "#slider-range" ).slider( "values", 0 )))));

  });

<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="slider-range"></div>