JQuery Month 滑块不起作用

Posted 2023-05-08

【中文标题】JQuery Month 滑块不起作用

【英文标题】：JQuery Month slider is not working

【发布时间】：2019-01-24 20:24:16

【问题描述】：

我指的是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() ],

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

【问题讨论】：

你只需要“12months' name”还是“month name + Year”？

@saAction 我需要两个“月名+年”

【参考方案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>

试试这个:)

【参考方案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>

【讨论】：

感谢您的评论，但正如我上面提到的，我只需要一个月份和年份而不是范围选择。

jQuery US "slider-range" 需要将 "A" 指向 "B"，如果你只需要没有任何范围的选择器，你需要别的东西。

我的意思是说，我只需要一个句柄就可以从滑块中选择月份，正如我们在这里看到的那样。 jqueryui.com/slider

@John，代码变了，现在只有一个滑块元素，我希望这就是你想要的！