DateSlider 日期拖拽组件

DateSlider日期拖拽组件，来源于jQRangeSlider

github地址

实例化方法

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)}//默认选中区域
        ,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));

    //重新赋值（选中区域）
    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