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

时间:2017-07-10 23:23:12

标签: javascript jquery date jquery-ui

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

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

返回以下字符串:

  

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

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

2 个答案:

答案 0 :(得分:2)

您可以将日期放入JavaScript日期,然后以YYYYMMDD格式输出。

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

要使月份和日期始终为两位数格式,请以“0”开头,并仅在月/日少于两位数时保留。

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

在此jsFiddle

中查看

答案 1 :(得分:0)

您可以将Javascript Date ObjectgetFullYear()等方法(或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或下面的代码段中演示的内容。

$(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>