如何在 jQRangeSlider 中输出最小值和最大值？

Question

我正在使用 jQRangeSlider 插件来创建日期范围滑块。我正在尝试使用此函数输出最大值和最小值：

var dateSliderMax = $("#slider").dateRangeSlider("max");
console.log(dateSliderMax.toString());

返回以下字符串：

2011 年 2 月 11 日星期五 00:00:00 GMT-0500（东部标准时间）

我想以20110211jsFiddle的格式将日期输出到控制台。我怎样才能做到这一点？

Answer 1

你可以把日期转换成 JavaScript 日期，然后以 YYYYMMDD 格式输出。

var date = new Date(dateSliderMax);
alert((date.getFullYear().toString() + (date.getMonth() + 1)) + date.getDate());

要使月份和日期始终采用两位数格式，请以“0”开头，并且仅当月/日小于两位数时才保留它。

"0" + (date.getMonth() + 1)).slice(-2)

在这个jsFiddle看到它

Answer 2

您可以将 Javascript Date Object 与 getFullYear() 之类的方法（或 MomentJS 之类的库）一起使用：

var dateSliderMax = $("#slider").dateRangeSlider("max");
var date = new Date(dateSliderMax.toString());
var year = date.getFullYear();
var month = date.getMonth() + 1;
if (month < 10) {
  month = '0'+month;
}
var day = date.getDate();
console.log(''+year+month+day);

在this updated fiddle 或下面的 sn-p 中查看它的演示。

$(document).ready(function() {
  $("#slider").dateRangeSlider();
  var dateSliderMax = $("#slider").dateRangeSlider("max");
  var date = new Date(dateSliderMax.toString());
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  if (month < 10) {
    month = '0' + month;
  }
  var day = date.getDate();
  console.log('' + year + month + day);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<script src="https://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderMouseTouch.js"></script>
<script src="https://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderDraggable.js"></script>
<script src="https://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderBar.js"></script>
<script src="https://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderHandle.js"></script>
<script src="https://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderLabel.js"></script>
<script src="https://ghusse.github.io/jQRangeSlider/stable/jQRangeSlider.js"></script>
<script src="https://ghusse.github.io/jQRangeSlider/stable/jQDateRangeSliderHandle.js"></script>
<script src="https://ghusse.github.io/jQRangeSlider/stable/jQDateRangeSlider.js"></script>
<script src="https://ghusse.github.io/jQRangeSlider/stable/jQRuler.js"></script>
<link href="https://ghusse.github.io/jQRangeSlider/stable/css/iThing.css" rel="stylesheet" />
<article style="padding:50px 20px">

  <div id="slider"></div>

</article>