easyui datebox datetimebox 添加按钮,替换按钮 ,按钮绑定事件

废话不多,先上代码

datebox:

$(document).ready(function(){ 
    var dt_buttons = $.extend([], $.fn.datebox.defaults.buttons);
        dt_buttons.splice(0, 1, {
            text: '今1天',
            handler: function(target){
                console.log('重写');
                //获得datetimebox的内部日历
                var Calendar = $(target).datebox("calendar");
                //获得当前日历中选中的天数
                var date = Calendar.calendar("options").current;
                //获得datetimebox的内部时间微调器
                //获得月和日
                var month = date.getMonth() + 1;
                var day = date.getDate();
                //拼接日期字符串
                var comboTime = date.getFullYear() + "-" + (month < 10 ? ('0' + month) : month) + "-" + (day < 10 ? ('0' + day) : day) + " ";
                
                $(target).combo("setText", comboTime);//设置组合框文本
                //$(target).datetimebox('setValue',"123 ");
                $(target).datetimebox('hidePanel');
            }
        });
        $('.easyui-datebox').datebox({
            buttons: dt_buttons,
            editable:false,
            width:'150px'
        });
 });

主要关注splice 函数的前两个参数,第一个参数代表位置,第二个参数代表增加还是替换(0增加;1替换);可能还有其它含义,大家自己测试体会。后面就是具体的函数体了,handler中是具体逻辑。

注:代码放到$(document).ready(function(){ });中。

datetimebox:

$(document).ready(function(){ 
    var dt_buttons = $.extend([], $.fn.datetimebox.defaults.buttons);
        dt_buttons.splice(0, 1, {
            text: '今1天',
            handler: function(target){
                console.log('重写');
                //获得datetimebox的内部日历
                var Calendar = $(target).datetimebox("calendar");
                //获得当前日历中选中的天数
                var date = Calendar.calendar("options").current;
                //获得datetimebox的内部时间微调器
                var Spinner = $(target).datetimebox("spinner");
                //获得月和日
                var month = date.getMonth() + 1;
                var day = date.getDate();
                //拼接日期字符串
                var comboTime = date.getFullYear() + "-" + (month < 10 ? ('0' + month) :                             month) + "-" + (day < 10 ? ('0' + day) : day) + " ";
                //通过微调器获得时分秒
                var hour = Spinner.timespinner("getHours");
                var minute = Spinner.timespinner("getMinutes");
                var seconds = Spinner.timespinner("getSeconds");
                //拼接最后选择后填入input的时间,这个时间格式可以根据自己需要随便改变
                comboTime += (hour < 10 ? ('0' + hour) : hour) + ":" + (minute < 10 ?             ('0' + minute) : minute) + ":" + (seconds < 10 ? ('0' + seconds) : seconds);

                $(target).combo("setText", comboTime);//设置组合框文本
                
                $(target).datetimebox('hidePanel');
            }
        });
        $('.easyui-datetimebox').datetimebox({
            buttons: dt_buttons,
            editable:false,
            width:'150px'
        });
 });

令附两个增加按钮的实例:

连接自:https://www.cnblogs.com/zno2/p/4828792.html

$(document).ready(function(){
        
        var d_buttons = $.extend([], $.fn.datebox.defaults.buttons);
        d_buttons.splice(1, 0, {
            text: '清空',
            handler: function(target){
                $(target).datebox('setValue','');
            }
        });
        $('.easyui-datebox').datebox({
            buttons: d_buttons,
            editable:false,
            width:'100px'
        });
        
        var dt_buttons = $.extend([], $.fn.datetimebox.defaults.buttons);
        dt_buttons.splice(2, 0, {
            text: '清空',
            handler: function(target){
                $(target).datetimebox('setValue','');
            }
        });
        $('.easyui-datetimebox').datetimebox({
            buttons: dt_buttons,
            editable:false,
            width:'150px'
        });
    });

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章