这是我为此创建的示例(fiddle)链接(我之前也在寻找类似的东西,后来决定自己创造一个):http://jsfiddle.net/Lcrsd3jt/45/
html:
<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="time-range">
<p>Time Range: <span class="slider-time"></span> - <span class="slider-time2"></span>
</p>
<div class="sliders_step1">
<div id="slider-range"></div>
</div>
</div>
js:
var dt_from = "2014/11/01 00:34:44";
var dt_to = "2014/11/24 16:37:43";
$('.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);
var hours = zeroPad(__dt.getHours(), 2);
var minutes = zeroPad(__dt.getMinutes(), 2);
var seconds = zeroPad(__dt.getSeconds(), 2);
return year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds;
};
$("#slider-range").slider({
range: true,
min: min_val,
max: max_val,
step: 10,
values: [min_val, max_val],
slide: function (e, ui) {
var dt_cur_from = new Date(ui.values[0]*1000);
$('.slider-time').html(formatDT(dt_cur_from));
var dt_cur_to = new Date(ui.values[1]*1000);
$('.slider-time2').html(formatDT(dt_cur_to));
}
});
样式表:
#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;
}
您需要将日期时间视为时间戳,并仅使用标准滑块来处理整数,根据滑块移动事件即时重新计算日期时间的输入(或其他内容)。