扩展 jQuery datebox控件按钮

简介: 功能需求: 自定义扩展,将原先的datebox控件按钮进行自定义的扩展:1.问题: 对原先的时间按钮控件进行更改扩展,新增 “一刻钟” “半小时” “一小时” 选项。 获取原先的 datebox 对象的原型,进行扩展。
功能需求: 自定义扩展,将原先的datebox控件按钮进行自定义的扩展:


1.问题:
    对原先的时间按钮控件进行更改扩展,新增  “一刻钟” “半小时” “一小时”   选项。
    获取原先的 datebox 对象的原型,进行扩展。


2.首先获取原先的datebox控件的原型
   function initDataButton(){
        var buttons = $.extend([], $.fn.datebox.defaults.buttons);
        buttons.splice(0, 2, {
            text: '一刻钟后',
            handler: function(target){
                var opts=$.data(target,"datetimebox").options;
                var date=_addm(target,"M",15);
                _b52(target,opts.formatter.call(target,date));
            }
        },{
            text: '半小时后',
            handler: function(target){
                var opts=$.data(target,"datetimebox").options;
                var date=_addm(target,"M",30);
                _b52(target,opts.formatter.call(target,date));
            }
        },{
            text: '一小时后',
            handler: function(target){
                var opts=$.data(target,"datetimebox").options;
                var date=_addm(target,"H",1);
                _b52(target,opts.formatter.call(target,date));
            }
        },{
            text: '确定',
            handler: function(target){
                _b53(target);
            }
        });
        $('#startTime').datebox({
            buttons: buttons
        });
        $('#endTime').datebox({
            buttons: buttons
        });
}




3.jQuery源码中的js代码:

function _addm(_b4f,f,n){
    var c=$(_b4f).datetimebox("calendar");
    var t=$(_b4f).datetimebox("spinner");
    var date=c.calendar("options").current;
    var h=t.timespinner("getHours");
    if(f=="H"){    
        h+=n;
    }
    var m=t.timespinner("getMinutes");
    var x=m%10;
    if(x>0&&x<5){//1,2,3,4
        m-=x;
    }else if(x>5&&x<10){//6,7,8,9
        m+=(10-x);
    }
    if(f=="M"){
        m+=n;
    }
    var s=0;//t.timespinner("getSeconds");
    return new Date(date.getFullYear(),date.getMonth(),date.getDate(),h,m,s);
};


function _b52(_b55,_b56,_b57){
    var opts=$.data(_b55,"datetimebox").options;
    $(_b55).combo("setValue",_b56);
    if(!_b57){
    if(_b56){
    var date=opts.parser.call(_b55,_b56);
    $(_b55).combo("setText",opts.formatter.call(_b55,date));
    $(_b55).combo("setValue",opts.formatter.call(_b55,date));
    }else{
    $(_b55).combo("setText",_b56);
    }
    }
    var date=opts.parser.call(_b55,_b56);
    $(_b55).datetimebox("calendar").calendar("moveTo",date);
    $(_b55).datetimebox("spinner").timespinner("setValue",_b58(date));
    function _b58(date){
    function _b59(_b5a){
    return (_b5a<10?"0":"")+_b5a;
    };
    var tt=[_b59(date.getHours()),_b59(date.getMinutes())];
    if(opts.showSeconds){
    tt.push(_b59(date.getSeconds()));
    }
    return tt.join($(_b55).datetimebox("spinner").timespinner("options").separator);
    };
};


function _b53(_b54){
    var opts=$.data(_b54,"datetimebox").options;
    var date=_b4e(_b54);
    _b52(_b54,opts.formatter.call(_b54,date));
    $(_b54).combo("hidePanel");
};



function _b4e(_b4f){
    var c=$(_b4f).datetimebox("calendar");
    var t=$(_b4f).datetimebox("spinner");
    var date=c.calendar("options").current;
    return new Date(date.getFullYear(),date.getMonth(),date.getDate(),t.timespinner("getHours"),t.timespinner("getMinutes"),t.timespinner("getSeconds"));
};

 

修改之前:

 

 

 

 

修改之后:

 

 

相关文章
|
JavaScript
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
108 0
|
4月前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
90 21
|
4月前
|
JavaScript 前端开发 iOS开发
ios样式开关按钮jQuery插件
ios样式开关按钮jQuery插件
72 7
|
7月前
|
JavaScript 前端开发 UED
jQuery日历控件与假日显示
【9月更文挑战第1天】
|
8月前
|
JavaScript Java
点击按钮,向下添加目录。Java script+jQuery写法
点击按钮,向下添加目录。Java script+jQuery写法
54 1
|
8月前
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
41 1
|
8月前
|
JavaScript 前端开发
如何在Vue2.X/Vue3.X项目引入jQuery,以及增加jQuery.easing扩展?让你的动画效果更加丝滑!
如何在Vue 2或Vue 3项目中引入jQuery及其动画扩展库jQuery.easing,以实现更丰富的动画效果。
237 0
如何在Vue2.X/Vue3.X项目引入jQuery,以及增加jQuery.easing扩展?让你的动画效果更加丝滑!
|
9月前
|
移动开发 开发框架 JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
|
9月前
|
移动开发 JSON JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
|
JavaScript 前端开发
JQuery显示和隐藏控件
JQuery显示和隐藏控件
80 0