Question

我在jQuery UI中创建了一个范围滑块，该滑块具有特定日期（2013-12-3）到今天的日期。

我需要范围才能选择这两者之间的每一个日期。

然而，每当我尝试使用我的滑块更改日期时，它表现得非常奇怪。

我使用滑块选择日期，然后通过将它们添加到开始日期来创建新日期。

$(document).ready(function() {
	var startDate = new Date(2013, 12, 3);
	var endDate = new Date();
	var timeDiff = Math.abs(endDate.getTime() - startDate.getTime());
	var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
	
	var fromDate = new Date(2013, 12, 3);
	var toDate = new Date();
	
	$("#rangeSlider").slider({
		range: true,
		min: 0,
		max: diffDays,
		animate: true,
		slide: function (event, ui) {
			fromDate.setDate(startDate.getDate() + ui.values[0]);
			toDate.setDate(startDate.getDate() + ui.values[1]);
			
			$("#rangeFromDate").html(fromDate.getFullYear() + "-" + (fromDate.getMonth() + 1) + "-" + fromDate.getDate());
			$("#rangeToDate").html(toDate.getFullYear() + "-" + (toDate.getMonth() + 1) + "-" + toDate.getDate());
		}
	});	
});

#rangeSlider {
  margin: 20px;
  margin-top: 100px;
 }
#rangeFrom {
	float: left;
}
#rangeTo {
	float: right;
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 

<div id="rangeSlider"></div>

<span id="rangeFrom">From: <span id="rangeFromDate">2013-12-3</span></span>
<span id="rangeTo">To: <span id="rangeToDate">2016-12-12</span></span>

编辑：我需要以ISO格式显示日期，我需要滑块上的双手柄

Answer 1

在选定日期输入中添加：

<span id="rangeFrom">From: <span id="rangeFromDate">2013-12-3</span></span>
<span id="rangeTo">To: <span id="rangeToDate">2016-12-12</span></span>
<!--- SHOW DATE HERE -->
<p>
  <label for="amount">Selected Date:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;" placeholder="Not Selected">
</p>

在JQueryUI中，设置我们的最大范围并计算基准日期和添加天数，已计算差异。

$(document).ready(function() {
  //months start at 0, so 11 is Dec, not 12
  //DEFINE YOUR START AND END DATE RANGE
  //TAKES START DATE AND END DATE CALCULATES DAYS
  //IN BETWEEN TO SET THE MAX, 
  //SLIDER THEN INCREMENTS BY DAYS
    var startDate = new Date(2013, 11, 3);
    var endDate = new Date(2016,11,12);

    var timeDiff = Math.abs(endDate.getTime() - startDate.getTime());
    var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));

    $("#rangeSlider").slider({
    //set our ranges here, min to max days, calculated above
    //with diffdays
    //MIN AND MAX ARE DAYS! SO min 0 is 0 DAYS from the start date
    //MAX IS  #of days between start and end so start date + max days =
    //END DATE
        range: "max",
        min: 0,
        max: diffDays,
        animate: true,

       slide: function (event, ui) {
         //set our starting point to add days to it.
         //max is taken care of above in max: diffdays
         var result = new Date(2013, 11, 3);
         result.setDate(result.getDate() + ui.value);
         //format the date
         var isoDate = result.getFullYear() + "-" + (result.getMonth() + 1) + "-" + result.getDate();
         //set the amount field
         $( "#amount" ).val(isoDate);
      }
   });  
});

Fiddle

Answer 2

您必须使用toDate的局部变量和var startDate = new Date(2013, 12, 3); var endDate = new Date(); var timeDiff = Math.abs(endDate.getTime() - startDate.getTime()); var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); $("#rangeSlider").slider({ range: true, min: 0, max: diffDays, step: 1, animate: true, slide: function (event, ui) { var fromDate = new Date(2013, 12, 3); var toDate = new Date(); fromDate.setDate(startDate.getDate() + parseInt(ui.values[0])); toDate.setDate(startDate.getDate() + parseInt(ui.values[1])); $("#rangeFromDate").text(fromDate.getFullYear() + "-" + (fromDate.getMonth() + 1) + "-" + fromDate.getDate()); $("#rangeToDate").text(toDate.getFullYear() + "-" + (toDate.getMonth() + 1) + "-" + toDate.getDate()); } });每次重新初始化。使用此fiddle

<强> JS：

gridOptions = {
    onRowDoubleClicked: doSomething
}

function doSomething(){
    alert('I did something')
}

JS日期和jQuery UI滑块很奇怪

2 个答案: