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;        })    }

 

賣個萌!