开发者社区> mr_伍先生> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

 

修改之前:

 

 

 

 

修改之后:

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Layui模块化,改造传统jquery扩展为layui模块
在我使用jquery扩展,拖拽组件的时候,因为使用的布局模板有些冲突,导致无法使用扩展,所以才会解决之后写下这篇文章。 Layui中内置了jquery 只有你所使用的模块有依赖到它,它才会加载,并且如果你的页面已经script引入了jquery,它并不会重复加载。内置的jquery模块去除了全局的和jQuery。这是layui文档中的描述,它内置了jq,但是去除了全局的和jQuery对象,也就是在window的全局对外接口被删除了。 拖拽组件的实现 假设siam.js是一个扩展,里面提供了一个类似这样的方法
0 0
【JQuery】扩展BootStrap入门——知识点讲解(一)
本期主要介绍扩展BootStrap入门——知识点讲解(一)
0 0
【JQuery】扩展BootStrap入门——知识点讲解(二)
本期主要介绍扩展BootStrap入门——知识点讲解(二)
0 0
jQuery_可见性过滤 jQuery 扩展|学习笔记
快速学习 jQuery_可见性过滤 jQuery 扩展
0 0
+关注
mr_伍先生
java,编程语言,算法兴趣
文章
问答
文章排行榜
最热
最新
相关电子书
更多
利用编译将 Vue 组件转成 React 组件
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载