與日期選擇器鏈接jQuery的範圍滑塊

我想給的DatePicker和RangeSlider在任一元素的小success.Changes聯繫在一起應該在其它進行反映，也可能的話有日期選擇器中定義的範圍。我從一個涉及創建一個滑塊的例子中獲取滑塊代碼，因此可能會刪除一些JS計算。

請使用jsFiddle Link作爲stackoverflow系統不能使用我的代碼。

var dt_from = "2011-11-01"; 
 
var dt_to = "2015-11-24"; 
 

 
$('.slider-time').html(dt_from); 
 
$('.slider-time2').html(dt_to); 
 
var min_val = Date.parse(dt_from)/1000; 
 
var max_val = Date.parse(dt_to)/1000; 
 

 
function zeroPad(num, places) { 
 
    var zero = places - num.toString().length + 1; 
 
    return Array(+(zero > 0 && zero)).join("0") + num; 
 
} 
 

 
function formatDT(__dt) { 
 
    var year = __dt.getFullYear(); 
 
    var month = zeroPad(__dt.getMonth() + 1, 2); 
 
    var date = zeroPad(__dt.getDate(), 2); 
 
    return date + '-' + month + '-' + year; 
 
}; 
 

 

 
$("#slider-range").slider({ 
 
    range: true, 
 
    min: min_val, 
 
    max: max_val, 
 
    step: 604800, 
 
    values: [min_val, max_val], 
 
    slide: function(e, ui) { 
 
    var dt_cur_from = new Date(ui.values[0] * 1000); //.format("yyyy-mm-dd hh:ii:ss"); 
 
    $('.slider-time').html(formatDT(dt_cur_from)); 
 

 
    var dt_cur_to = new Date(ui.values[1] * 1000); //.format("yyyy-mm-dd hh:ii:ss");     
 
    $('.slider-time2').html(formatDT(dt_cur_to)); 
 
    } 
 
}); 
 

 

 
$("#start_datepicker").datepicker({ 
 
    changeMonth: true, 
 
    changeYear: true 
 
}); 
 

 
$("#end_datepicker").datepicker({ 
 
    changeMonth: true, 
 
    changeYear: true 
 
});

#time-range p { 
 
    font-family: "Arial", sans-serif; 
 
    font-size: 14px; 
 
    color: #333; 
 
} 
 
.ui-slider-horizontal { 
 
    height: 8px; 
 
    background: #D7D7D7; 
 
    border: 1px solid #BABABA; 
 
    box-shadow: 0 1px 0 #FFF, 0 1px 0 #CFCFCF inset; 
 
    clear: both; 
 
    margin: 8px 0; 
 
    -webkit-border-radius: 6px; 
 
    -moz-border-radius: 6px; 
 
    -ms-border-radius: 6px; 
 
    -o-border-radius: 6px; 
 
    border-radius: 6px; 
 
} 
 
.ui-slider { 
 
    position: relative; 
 
    text-align: left; 
 
} 
 
.ui-slider-horizontal .ui-slider-range { 
 
    top: -1px; 
 
    height: 100%; 
 
} 
 
.ui-slider .ui-slider-range { 
 
    position: absolute; 
 
    z-index: 1; 
 
    height: 8px; 
 
    font-size: .7em; 
 
    display: block; 
 
    border: 1px solid #5BA8E1; 
 
    box-shadow: 0 1px 0 #AAD6F6 inset; 
 
    -moz-border-radius: 6px; 
 
    -webkit-border-radius: 6px; 
 
    -khtml-border-radius: 6px; 
 
    border-radius: 6px; 
 
    background: #81B8F3; 
 
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); 
 
    background-size: 100%; 
 
    background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #A0D4F5), color-stop(100%, #81B8F3)); 
 
    background-image: -webkit-linear-gradient(top, #A0D4F5, #81B8F3); 
 
    background-image: -moz-linear-gradient(top, #A0D4F5, #81B8F3); 
 
    background-image: -o-linear-gradient(top, #A0D4F5, #81B8F3); 
 
    background-image: linear-gradient(top, #A0D4F5, #81B8F3); 
 
} 
 
.ui-slider .ui-slider-handle { 
 
    border-radius: 50%; 
 
    background: #F9FBFA; 
 
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); 
 
    background-size: 100%; 
 
    background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #C7CED6), color-stop(100%, #F9FBFA)); 
 
    background-image: -webkit-linear-gradient(top, #C7CED6, #F9FBFA); 
 
    background-image: -moz-linear-gradient(top, #C7CED6, #F9FBFA); 
 
    background-image: -o-linear-gradient(top, #C7CED6, #F9FBFA); 
 
    background-image: linear-gradient(top, #C7CED6, #F9FBFA); 
 
    width: 22px; 
 
    height: 22px; 
 
    -webkit-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset; 
 
    -moz-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset; 
 
    box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset; 
 
    -webkit-transition: box-shadow .3s; 
 
    -moz-transition: box-shadow .3s; 
 
    -o-transition: box-shadow .3s; 
 
    transition: box-shadow .3s; 
 
} 
 
.ui-slider .ui-slider-handle { 
 
    position: absolute; 
 
    z-index: 2; 
 
    width: 22px; 
 
    height: 22px; 
 
    cursor: default; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 
.ui-slider .ui-slider-handle:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 8px; 
 
    height: 8px; 
 
    border-radius: 50%; 
 
    top: 50%; 
 
    margin-top: -4px; 
 
    left: 50%; 
 
    margin-left: -4px; 
 
    background: #30A2D2; 
 
    -webkit-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF; 
 
    -moz-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 white; 
 
    box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF; 
 
} 
 
.ui-slider-horizontal .ui-slider-handle { 
 
    top: -.5em; 
 
    margin-left: -.6em; 
 
} 
 
.ui-slider a:focus { 
 
    outline: none; 
 
}

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
 
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div id="time-range"> 
 
    <p>Start date: <span class="slider-time"></span> 
 
    <br>End date: <span class="slider-time2"></span> 
 
    </p> 
 

 
    <div class="sliders_step1"> 
 
    <div id="slider-range"></div> 
 

 
    <p>Start date: 
 
     <input type="text" id="start_datepicker"> 
 
    </p> 
 
    <p>End date: 
 
     <input type="text" id="end_datepicker"> 
 
    </p> 
 
    </div> 
 
</div>

來源

2015-09-18 Andrew87

嘿......這是你想達到的目的嗎？ http://jsfiddle.net/w1a920u7/ – Shivi

@Shivi你必須'叉'你對jsFiddle所做的更改（按鈕旁邊的運行，然後張貼新的鏈接），否則我看不到他們 - 提請白12分鐘前 – Andrew87

我更新了小提琴，唯一剩下的部分是滑動滑塊...... M在這上面工作。直到那時，也許你可以檢查這一個出來... http://jsfiddle.net/qqd7mg9t/ – Shivi

好像這樣的jsfiddle幫助用戶解決問題：

jsfiddle.net/mmrevOxf

這裏

關鍵概念是一些文本已被選擇之後發生ONSELECT事件

在這裏，我在datepicker中添加了以下選項：

$("#start_datepicker").datepicker({ 
    minDate: new Date(dt_from), 
    maxDate: new Date(dt_to), 
    onSelect: function() { 
    $('.slider-time').html(formatDT(new Date(this.value))); 
    min_val = Date.parse(this.value)/1000; 
    $("#slider-range").slider("option", "values", [ min_val, max_val]); 
    }

來源

2015-09-18 07:35:54 Shivi

與日期選擇器鏈接jQuery的範圍滑塊

回答

相關問題