`
changhongbao
  • 浏览: 122448 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

easyui datebox 扩展 只显示年月

 
阅读更多

一个日期控件只显示年月是很正常的事情。可是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限定范围

    在使用EasyUI框架进行前端开发时,DateBox组件是一个非常常用的日期选择工具,它提供了方便的日期输入和选择功能。本篇文章将详细讲解如何利用EasyUI的DateBox组件设定日期范围,确保用户选择的开始时间和结束时间...

    更改easyui-datebox日期格式

    解决easyui-datebox日期格式,只需引入此包即可,不需改源码

    给easyui datebox扩展一个清空的实例

    在本文中,我们将深入探讨如何为EasyUI Datebox组件扩展一个清空功能,这是一个非常实用的增强,使得用户能够方便地清除已选择的日期,从而提高用户体验。EasyUI 是一个基于 jQuery 的轻量级前端框架,它提供了一...

    jquery easyui 周历 周选择下拉控件

    1. **扩展EasyUI组件**:通过编写JavaScript代码,继承EasyUI的datebox组件,增加新的属性和方法来处理周选择。 2. **样式设计**:根据需求定制日期显示格式,使其以周为单位展示,同时确保样式与EasyUI主题保持一致...

    给Easyui-Datebox设置隐藏或者不可用的解决方法

    最近我在做一个安全监测系统,选择了用easyui进行搭建,easyui是一种基于jQuery的用户界面插件集合。使用easyui可以省去很多代码,功能上需要加...下面小编给大家介绍下给Easyui-Datebox设置隐藏或者不可用的解决方法

    EasyUI修改DateBox和DateTimeBox的默认日期格式示例

    在 EasyUI 中,DateBox 和 DateTimeBox 是两个常用的日期选择控件,它们提供了方便的方式来输入和显示日期或日期时间信息。这两款控件在功能上非常相似,主要的区别在于 DateTimeBox 还包含了时间部分。 DateBox ...

    easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码

    EasyUI的Datebox组件是一个常用的日期选择器,能够方便地集成到网页中,为用户提供日期选择的功能。本文将详细介绍如何使用EasyUI Datebox设置时间限制,包括开始时间与结束时间的关联限制,以及确保截止日期始终...

    只显示年份月份的时间控件

    描述中提到,"一般插件不能只选年月",这反映了一个常见的问题,即大多数现成的UI框架如EasyUI或Bootstrap提供的日期选择器默认包含完整的日期范围,包括日、月、年。开发者如果想要定制成只显示年月的控件,需要对...

    EasyUi图标扩展样式大全(1700个)

    标题提到的“EasyUi图标扩展样式大全(1700个)”是一个专门针对EasyUi的图标库增强方案,旨在解决EasyUI默认图标样式不足和美观度不高的问题。 这个扩展样式大全包含了1700个图标,大大增加了EasyUI在设计界面时的...

    easyUI扩展图标

    为了方便使用,压缩包中的"EasyUi图标扩展样式"很可能包含了图标图片文件(如PNG或SVG格式)以及对应的CSS文件,开发者只需要将这些文件引入到项目中,就可以立即享受到丰富的图标资源。同时,根据项目的需求,...

    EasyUI Datebox 日期验证之开始日期小于结束时间

    EasyUI Datebox 是一款基于jQuery和EasyUI框架的日期选择插件,它提供了丰富的样式和功能,使得用户在界面上能够方便地选择日期。本文将详细讲解如何使用EasyUI Datebox 进行日期验证,特别是实现开始日期小于结束...

    Easyui的扩展图标

    扩展图标的使用方法与常规Easyui图标基本一致,这意味着开发者不需要进行额外的编程工作,只需按照既有的规则引入和应用这些图标即可。下面将详细介绍Easyui图标的相关知识点: 1. **图标引入**:在Easyui中,图标...

    浅谈如何实现easyui的datebox格式化

    实现easyui的datebox格式化。效果如下,用“++”隔开,看你喜欢用什么都可以。   1、html 证件有效期至: &lt;span&gt;&lt;input id=passvali name=hotel.passvali&gt; 2、js /* 证件有效期至 */ $('#passvali')....

    EasyUi图标扩展样式.7z

    EasyUI图标扩展样式是针对EasyUI框架的一种增强,旨在提供更多的视觉元素,以满足开发者在构建用户界面时对个性化和多样性的需求。EasyUI是一个基于jQuery的轻量级且易于使用的前端开发框架,它提供了丰富的组件,如...

    EasyUI 扩展ICON图标

    "EasyUI 扩展ICON图标" 提供了一个解决方案,它增加了1775个额外的图标,大大丰富了EasyUI的图标库。这些图标可能是矢量图形,可以在不同分辨率和尺寸下保持清晰,同时涵盖了各种常见的功能类别,如导航、操作、状态...

    easyui 日期控件选择到月份

    easyui日期控件只选择到月份,保存记录一下。 &lt;input id="month" class="easyui-datetimebox" name="month" data-options="required:true,formatter:myformatter,parser:myParser" 160px" /&gt;

    EasyUi图标扩展样式

    EasyUi图标扩展样式是针对EasyUI框架的一种定制化设计,旨在优化和增强默认图标的视觉效果和使用体验。EasyUI是一个轻量级的JavaScript库,主要用于构建用户界面,它基于jQuery,提供了丰富的组件和主题,使得开发者...

    EasyUi图标扩展样式.zip

    5. **响应式设计**:EasyUi图标扩展样式通常已经考虑了响应式设计,但你仍需根据实际项目需求进行调整,确保在不同设备和屏幕尺寸下都能正常显示。 6. **测试与优化**:在实际应用中,需要进行充分的测试,检查各个...

Global site tag (gtag.js) - Google Analytics