javascript - Jquery slider 月/年

Question

我有一些代码，它当前在 slider 上以以下格式显示日期:2013 年 1 月 1 日星期二 - 2014 年 1 月 1 日星期三，但是，如果可能的话，我希望它以以下格式显示 01/2015 - 01/2018 我确定要改变什么才能实现这一目标。谢谢

$(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: new Date('January 2012 00:0:00').getTime() / 1000,
      max: new Date('January 2019 00:0:00').getTime() / 1000,
      step: 86400,
      values: [ new Date('January 2013 00:0:00').getTime() / 1000, new Date('January 01, 2014 00:0:00').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());

  });

Answer 1

new Date()日期时间格式无效，请将其更改为 'yyyy-mm-ddThh:min:ss' ，那么它应该可以工作。

检查JavaScript Date弄清楚如何构造一个 Date 对象。

$(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: new Date('2012-01-01T00:00:00').getTime() / 1000,
      max: new Date('2019-01-01T00:00:00').getTime() / 1000,
      step: 864,
      values: [ new Date('2012-03-01T00:00:00').getTime() / 1000, new Date('2014-01-01T00:00:00').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="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.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>

更新:下面是简单的月/年范围，主要修改是调整一些描述文本和日期格式。

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: true,
      min: new Date('2012-01-01T00:00:00').getTime(),
      max: new Date('2019-01-01T00:00:00').getTime(),
      step: 86400000,
      values: [ new Date('2012-03-01T00:00:00').getTime(), new Date('2014-01-01T00:00:00').getTime() ],
      slide: function( event, ui ) {
        $( "#amount" ).val( formatDate(new Date(ui.values[0])) + '-' + formatDate(new Date(ui.values[1])) );
      }
    });
    $( "#amount" ).val( formatDate((new Date($( "#slider-range" ).slider( "values", 0 )))) +
      " - " + formatDate((new Date($( "#slider-range" ).slider( "values", 1 )))));

  });

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.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">month range:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;width:400px;">
</p>
 
<div id="slider-range"></div>