http://blog.csdn.net/zhaobao110/article/details/47755445

一个日期控件只显示年月是很正常的事情。可是easyui datebox 不支持这种格式的,要么就是截取字符串,不可取,自己没有写过类似的扩展,但是也算是实现功能了,先来张图吧

本人水平有限写不出高深的东西,代码大家都能看懂,但是还是贡献出来,让大家提提意见共同进步吧

$.extend($.fn.combobox.methods, {
    yearandmonth: function (jq) {
        return jq.each(function () {
            var obj = $(this).combobox();
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var table = $('<table>');
            var tr1 = $('<tr>');
            var tr1td1 = $('<td>', {
                text: '-',
                click: function () {
                    var y = $(this).next().html();
                    y = parseInt(y) - 1;
                    $(this).next().html(y);
                }
            });
            tr1td1.appendTo(tr1);
            var tr1td2 = $('<td>', {
                text: year
            }).appendTo(tr1);

var tr1td3 = $('<td>', {
                text: '+',
                click: function () {
                    var y = $(this).prev().html();
                    y = parseInt(y) + 1;
                    $(this).prev().html(y);
                }
            }).appendTo(tr1);
            tr1.appendTo(table);

var n = 1;
            for (var i = 1; i <= 4; i++) {
                var tr = $('<tr>');
                for (var m = 1; m <= 3; m++) {
                    var td = $('<td>', {
                        text: n,
                        click: function () {
                            var yyyy = $(table).find("tr:first>td:eq(1)").html();
                            var cell = $(this).html();
                            var v = yyyy + '-' + (cell.length < 2 ? '0' + cell : cell);
                            obj.combobox('setValue', v).combobox('hidePanel');

}
                    });
                    if (n == month) {
                        td.addClass('tdbackground');
                    }
                    td.appendTo(tr);
                    n++;
                }
                tr.appendTo(table);
            }
            table.addClass('mytable cursor');
            table.find('td').hover(function () {
                $(this).addClass('tdbackground');
            }, function () {
                $(this).removeClass('tdbackground');
            });
            table.appendTo(obj.combobox("panel"));

});
    }
});

调用方法 $('#id').combobox('yearandmonth')

.mytable
{
    padding: 0;
    margin: 10px auto;
    border-collapse: collapse;
    font-family: @宋体;
    empty-cells: show;
}

.mytable caption
{
    font-size: 12px;
    color: #0E2D5F;
    height: 16px;
    line-height: 16px;
    border: 1px dashed red;
    empty-cells: show;
}

.mytable tr th
{
    border: 1px dashed #C1DAD7;
    letter-spacing: 2px;
    text-align: left;
    padding: 6px 6px 6px 12px;
    font-size: 13px;
    height: 16px;
    line-height: 16px;
    empty-cells: show;
}

.mytable tr td
{
    font-size: 12px;
    border: 1px dashed #C1DAD7;
    padding: 6px 6px 6px 12px;
    empty-cells: show;
    border-collapse: collapse;
}
.cursor
{
    cursor: pointer;
}
.tdbackground
{
    background-color: #FFE48D;
}

easyui datebox 扩展 只显示年月的更多相关文章

  1. easyui的datebox只显示年月

    要求点击easyui的datebox时只显示年月,隐藏日,之前百度了好多,发现有的好麻烦,有的使用没效果,也许自己没理解,改不了.最后老员工帮我搞定了,添加一个fomatter和一个parser函数就 ...

  2. easyui datebox时间控件如何只显示年月

    easyui datebox控件,只显示年月,不显示年月日 需要的效果图如下: 具体的js代码: <script> $(function(){ intiMonthBox('costTime ...

  3. 自定义一个只显示年月的DatePicker(UIDatePicker无法实现年月显示)

    HooDatePicker 介绍(introduction) ==================================================项目需要一个DatePicker,只显 ...

  4. zui框架配置日期控件只显示年月

    zui框架配置日期控件datetimepicker只显示年月 <!DOCTYPE html> <head> <script src="~/Scripts/jqu ...

  5. 转 EasyUi日期控件datebox设置,只显示年月,也只能选择年月

    1.引入Jquery和easyui,注低版本的Jquery和easy不能使用,这里使用的Jquery是1.8.2easyui是1.6.1.1.easyui下载地址:http://www.jeasyui ...

  6. JQuery EasyUI 日期控件 怎样做到只显示年月,而不显示日

    标题问题的答案在OSChina中 http://www.oschina.net/question/2282354_224401?fromerr=lHJTcN89 我还是把这个记录下来 ======== ...

  7. EasyUI Calendar 日历插件,只显示年月。

    从别人的博客园搬过来的,放在这里只是为了方便自己用.已经注明原文出处,尊重别人的劳动成果. 原文地址:http://www.cnblogs.com/hmYao/p/5779463.html 此日历插件 ...

  8. easyui只显示年月,时间格式

    <div > <input id="db" /> </div> <script> /*power by showbo http:// ...

  9. easyui时间框只选择年月

    html: <input type="text" id="datetime" > js: <script type="text/ja ...

随机推荐

  1. FICO(费埃哲)评分系统有什么优缺点?在国内的发展怎么样?

    权威回答: FICO的优点很明显: 在美国数据库较全面.一般存储有最近7-10年的个人信用记录,包括银行信用.商业信用甚至保险等. 客观性.计算机自动完成评估工作,克服人为操作的失误. 快捷性.出结果 ...

  2. ffplay.exe操作方式

    大牛博客: 博文名称:[总结]FFMPEG视音频编解码零基础学习方法 博文链接:http://blog.csdn.net/leixiaohua1020/article/details/15811977 ...

  3. notion笔记

    不错的笔记应用, 模式新颖, 正在使用, 如有相同使用者可以入群交流 notion QQ群 725638123

  4. Java面向对象程序设计

    北京电子科技学院(BESTI)                                                                                 实    ...

  5. Task 8 找水王

    任务: 三人行设计了一个灌水论坛.信息学院的学生都喜欢在上面交流灌水,传说在论坛上有一个“水王”,他不但喜欢发帖,还会回复其他ID发的每个帖子.坊间风闻该“水王”发帖数目超过了帖子数目的一半. 如果你 ...

  6. 【动态规划】POJ-2229

    一.题目 Description Farmer John commanded his cows to search for different sets of numbers that sum to ...

  7. 【CSAPP笔记】5. 汇编语言——数据

    本博客对于汇编的介绍基于32位机器的Intel x86系列处理器和IA32指令集,也涉及少部分x86-64.由于汇编知识相对复杂,这里只做简单介绍和记录,详细请参照书本! 数据格式 下面这张表格中体现 ...

  8. Unity3D游戏开发——收集当前关卡游戏中分散的物件

    运用场景 许多游戏中会有一些供玩家拾起的物件,例如装备.血包.道具等.当玩家与物件进行碰撞后,则会进入仓库. 本篇介绍了简单的碰撞过程. 原理 基本的碰撞机制,用到OnTriggerEnter()碰撞 ...

  9. 关于SVM数学细节逻辑的个人理解(一) :得到最大间隔分类器的基本形式

    网上,书上有很多的关于SVM的资料,但是我觉得一些细节的地方并没有讲的太清楚,下面是我对SVM的整个数学原理的推导过程,其中逻辑的推导力求每一步都是有理有据.现在整理出来和大家讨论分享. 因为目前我的 ...

  10. 使用WinSW 将 exe 创建成Windows下面 service的方法 (将nginx创建成 services)

    1. 使用winsw工具能够将部分exe 创建成服务, 这样可以很简单的创建nginx的服务, 避免每次需要执行相应的命令. 2. 方法,下载 工具 地址 github https://github. ...