DateSlider 日期拖拽組件
DateSlider日期拖拽組件牺丙，來源于jQRangeSlider
實(shí)例化方法
var Months = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
$(function(){
createDemos();
});
function createDemos(){
var date = $("<div id='date' />").appendTo($("#dateSlider"));//渲染日期組件
var dateSilderObj=date.dateRangeSlider({
arrows:false,//是否顯示左右箭頭
bounds: {min: new Date(2013, 7, 1), max: new Date(2014, 6, 31, 12, 59, 59)},//最大 最少日期
defaultValues: {min: new Date(2014, 1, 23), max: new Date(2014, 4, 23)}//默認(rèn)選中區(qū)域
,scales:[{
first: function(value){return value; },
end: function(value) {return value; },
next: function(val){
var next = new Date(val);
return new Date(next.setMonth(next.getMonth() + 1));
},
label: function(val){
return Months[val.getMonth()];
},
format: function(tickContainer, tickStart, tickEnd){
tickContainer.addClass("myCustomClass");
}
}]
});//日期控件
//重新賦值（整個時間軸）
dateSilderObj.dateRangeSlider("bounds", new Date(2013, 8, 1), new Date(2014, 7, 31, 12, 59, 59));
//重新賦值（選中區(qū)域）
dateSilderObj.dateRangeSlider("values", new Date(2014, 2, 23), new Date(2014, 5, 23));
//拖動完畢后的事件
dateSilderObj.bind("valuesChanged", function(e, data){
var val=data.values;
var stime=val.min.getFullYear()+"-"+(val.min.getMonth()+1)+"-"+val.min.getDate();
var etime=val.max.getFullYear()+"-"+(val.max.getMonth()+1)+"-"+val.max.getDate();
console.log("起止時間："+stime+" 至 "+etime);
});
}
效果
dateSlider.png
