扩展 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"));
};

 

修改之前:

 

 

 

 

修改之后:

 

 

相关文章
|
6月前
|
JavaScript
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
54 0
|
12天前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
|
7月前
|
JavaScript 前端开发
JQuery显示和隐藏控件
JQuery显示和隐藏控件
36 0
|
6月前
|
JavaScript
jquery点击删除按钮,删除当前的div
jquery点击删除按钮,删除当前的div
34 0
|
6月前
|
JavaScript 前端开发
jquery导航选中按钮颜色变化
jquery导航选中按钮颜色变化
34 0
|
6月前
|
JavaScript
jQuery点击按钮,生成input输入框
jQuery点击按钮,生成input输入框
33 0
|
9月前
|
JavaScript 前端开发
jquery如何在点击一个按钮时显示隐藏
jquery如何在点击一个按钮时显示隐藏
99 0
|
10月前
|
JavaScript 前端开发
jquery通过setInterval实现按钮的轮播点击效果
jquery通过setInterval实现按钮的轮播点击效果
48 0
jquery通过setInterval实现按钮的轮播点击效果
|
10月前
|
JavaScript
jquery实现tab选项卡同一个按钮不同onClick链接的解决方案
jquery实现tab选项卡同一个按钮不同onClick链接的解决方案
70 0
|
JavaScript
Layui模块化,改造传统jquery扩展为layui模块
在我使用jquery扩展,拖拽组件的时候,因为使用的布局模板有些冲突,导致无法使用扩展,所以才会解决之后写下这篇文章。 Layui中内置了jquery 只有你所使用的模块有依赖到它,它才会加载,并且如果你的页面已经script引入了jquery,它并不会重复加载。内置的jquery模块去除了全局的和jQuery。这是layui文档中的描述,它内置了jq,但是去除了全局的和jQuery对象,也就是在window的全局对外接口被删除了。 拖拽组件的实现 假设siam.js是一个扩展,里面提供了一个类似这样的方法
282 0