实现datebox 只能显示年月功能

最新推荐文章于 2020-12-10 17:30:46 发布

原创最新推荐文章于 2020-12-10 17:30:46 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #easy-ui

easyui 专栏收录该内容

1 篇文章

订阅专栏

在使用jQuery Easy-UI的Datebox组件时，若需限制仅显示年月，可以通过特定代码实现。在赋值操作之前，需要添加特定的代码片段来控制Datebox的显示模式。

在实现datebox 只能显示年月后,下面代码无法赋值

$('#id').datebox({'setValue','2017-01'})

添加以下代码即可实现(一定加在年月代码前)

      var curr_time = new Date();
    function myformatter(d){
        return d.getFullYear() + '-' + (d.getMonth()<9?'0'+(d.getMonth()+1):(d.getMonth()+1));
    }
    $("#jsStartTime").val(myformatter(curr_time));

控制datebox显示年月

  var curr_time = new Date();
    function myformatter(d){
        return d.getFullYear() + '-' + (d.getMonth()<9?'0'+(d.getMonth()+1):(d.getMonth()+1));
    }
    $("#jsStartTime").val(myformatter(curr_time));
    //禁用
    var tds = false;
    $("#jsStartTime").datebox({
        onShowPanel:function(){
            var p = $('#jsStartTime').datebox('panel');
            p.find('span.calendar-text').trigger('click');
            p.find(".datebox-button-a").eq(0).hide();

            var span = p.find('span.calendar-text');
            //屏蔽选择今天的按钮
            p.find('.calendar-text').hide();
            //输入框原本可填，会触发事件，屏蔽掉
            p.find('.calendar-menu-year').attr("readonly","readonly");
            if (!tds)//初始化只需要捆绑一次事件就够了
                setTimeout(function () {
                    tds =p.find('div.calendar-menu-month-inner td');
                    tds.click(function (e) {
                        e.stopPropagation(); //禁止冒泡执行easyui给月份绑定的事件
                        var year = /\d{4}/.exec(span.html())[0]//得到年份
                        month = parseInt($(this).attr('abbr'), 10); //月份
                        $('#jsStartTime').datebox('hidePanel').datebox('setValue', year + '-' + month + '-' + '01'); //设置日期的值
                    });
                });
        },
        formatter: function (d) {//设置格式
            return d.getFullYear() + '-' + (d.getMonth()<9?'0'+(d.getMonth()+1):(d.getMonth()+1));
        }
    });