text time limit

前端时间搞一个页面, 一个文本框需要绑定一个datepicker,

由于bootstrap + 乱七八糟定义一堆的css, 哪个日期控件上来都乱了套了, 后来闲下来写了一个限制文本输入的jquery插件, 总结:

1. 对js真是无爱啊

2. 我写的这东西也就是给程序员用的

绑定插件:

$('text').datetimelimit();

现在就这一种时间格式.

操作方式:

1, 选定文本框, 按tab可以在每个域跳转

2, 在某个域内按上下键, 可以进行 +1, -1操作

3, 在某个域内输入数字, 可以改变相关值

4, 其它输入屏蔽

代码奉上

$.fn.datetimelimit = function(defaultTime){
        function stringToDate(s){ //字符串转时间
            var l = s.match(/(\d{4})-(\d{1,2})-(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})/);
            if (l){
                l = l.slice(1);
                var d = new Date();
                d.setFullYear(l[0], l[1]-1, l[2]);
                d.setHours(l[3], l[4], l[5]);
                return d;
            }
        }
        function dateToString(date){ //时间转字符串
            if (date==undefined){
                var date = new Date();
            }
            return ('000'+date.getFullYear()).substr(-4)+"-"+
                (date.getMonth()<9?"0":"")+(date.getMonth()+1)+"-"+
                (date.getDate()<10?"0":"")+date.getDate()+" "+
                (date.getHours()<10?"0":"")+date.getHours()+":"+
                (date.getMinutes()<10?"0":"")+date.getMinutes()+":"+
                (date.getSeconds()<10?"0":"")+date.getSeconds();
            
        }
        function selectionMark(index){ //在文本框内光标指定的刻度
            if (index<5) {return 0;} //year
            if (index>=5&&index<8){return 1;} //month
            if (index>=8&&index<11){return 2;} //day
            if (index>=11&&index<14){return 3;} //hour
            if (index>=14&&index<17) {return 4;} //minute
            return 5; //second
        }
        function getSelectionRange(markIndex){  //根据刻度推算文本范围
            switch (markIndex){
                case 0: return [0,4];break;
                case 1: return [5,7];break;
                case 2: return [8, 10];break;
                case 3: return [11, 13];break;
                case 4: return [14, 16];break;
                case 5: return [17, 19];break;
            } 
        }
        function changeDateStep(target, cursorIndex, isAdd){  //对时间做小范围 +-1操作
            var date = stringToDate($(target).val());
            if (!date){return false;} 
            var isAdd = (isAdd==undefined)?true:isAdd;
            switch(selectionMark(cursorIndex)){
                case 0: date.setFullYear(isAdd?date.getFullYear()+1:date.getFullYear()-1);break;
                case 1: date.setMonth(isAdd?date.getMonth()+1:date.getMonth()-1);break;
                case 2: date.setDate(isAdd?date.getDate()+1:date.getDate()-1);break;
                case 3: date.setHours(isAdd?date.getHours()+1:date.getHours()-1);break;
                case 4: date.setMinutes(isAdd?date.getMinutes()+1:date.getMinutes()-1);break;
                default: date.setSeconds(isAdd?date.getSeconds()+1:date.getSeconds()-1);
            };
            var cstart = target.selectionStart;
            var cend = target.selectionEnd;
            $(target).val(dateToString(date));
            target.selectionEnd = cend;
            target.selectionStart = cstart;
            return false;
        }
        function changeDate(target, cursorIndex, value){  //修改时间
            var date = stringToDate($(target).val());
            if (!date){return false;} 
            switch(selectionMark(cursorIndex)){
                case 0: 
                    date.setFullYear(date.getFullYear()%1000*10+value);
                    break;
                case 1: 
                    var newValue = (date.getMonth()+1)%10*10+value;
                    date.setMonth(newValue>12?newValue%10-1:newValue-1);
                    break;
                case 2: 
                    var newValue = date.getDate()%10*10+value;
                    date.setDate((newValue > new Date(date.getFullYear(), date.getMonth(), 0).getDate())?newValue%10:newValue);
                    break;
                case 3: 
                    var newValue = date.getHours()%10*10+value;
                    date.setHours(newValue>23?newValue%10:newValue);
                    break;
                case 4: 
                    var newValue = date.getMinutes()%10*10+value;
                    date.setMinutes(newValue>59?newValue%10:newValue);
                    break;
                default: 
                    var newValue = date.getSeconds()%10*10+value;
                    date.setSeconds(newValue>59?newValue%10:newValue);
            };
            var cstart = target.selectionStart;
            var cend = target.selectionEnd;
            $(target).val(dateToString(date));
            target.selectionEnd = cend;
            target.selectionStart = cstart;
            return false;
        }
        if (defaultTime){
            $(this).val(defaultTime);
        }
        else{
            $(this).val(dateToString());
        }
        $(this).keydown(function(event){
            console.log(event.keyCode + "---" + event.which)
            var cursorIndex = this.selectionEnd;
            switch (event.which){
                case 38: //up
                    return changeDateStep(this, cursorIndex, true);
                case 40: //down
                    return changeDateStep(this, cursorIndex, false);
                case 9: //tab
                    var mark = selectionMark(cursorIndex);
                    var sr = getSelectionRange((mark<5)?mark+1:0);
                    this.setSelectionRange(sr[0], sr[1]);
                    return false;
                case 37: //left
                case 39: //right
                    return;
            }
            if (event.which>=48&&event.which<=57){
                var numkey = event.which - 48;
                return changeDate(this, cursorIndex, numkey);
            }
            if (event.which>=96&&event.which<=105){
                var numkey = event.which - 96;
                return changeDate(this, cursorIndex, numkey);
            }
            
            return false;
        })
    }

卖个萌!