JSの日付とjQueryのUIスライダが奇妙なもの

Question

jQuery UIで、今日の日付までの特定の日付（2013-12-3）を持つ範囲スライダを作成しています。

これらの2つの間のすべての日付を選択できるようにする必要があります。

ただし、スライダを使用して日付を変更しようとすると、非常に奇妙な動作をします。

スライダーを使用して曜日を選択し、開始日に追加することで新しい日付を作成しています。

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

#rangeSlider { 
 
    margin: 20px; 
 
    margin-top: 100px; 
 
} 
 
#rangeFrom { 
 
\t float: left; 
 
} 
 
#rangeTo { 
 
\t 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>

EDIT：私は日付がISO形式で表示する必要があると私は選択した日付の入力に私のスライダー

Answer 1

。このfiddle

JSを使用してください：私は時間枠を選択することができるように範囲を持っている必要があります

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()); 
       } 
      }); 

Answer 2

追加の二重のハンドルを必要とする：

<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では、最大範囲を設定し、b yは基準日を取って日数を追加します。差はすでに計算されています。あなたは毎回reintializeするfromDateとtoDateのローカル変数を使用する必要が

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