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

 

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