一个日期控件只显示年月是很正常的事情。可是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 是一个基于 jQuery 的轻量级前端框架,它提供了一...
1. **扩展EasyUI组件**:通过编写JavaScript代码,继承EasyUI的datebox组件,增加新的属性和方法来处理周选择。 2. **样式设计**:根据需求定制日期显示格式,使其以周为单位展示,同时确保样式与EasyUI主题保持一致...
最近我在做一个安全监测系统,选择了用easyui进行搭建,easyui是一种基于jQuery的用户界面插件集合。使用easyui可以省去很多代码,功能上需要加...下面小编给大家介绍下给Easyui-Datebox设置隐藏或者不可用的解决方法
在 EasyUI 中,DateBox 和 DateTimeBox 是两个常用的日期选择控件,它们提供了方便的方式来输入和显示日期或日期时间信息。这两款控件在功能上非常相似,主要的区别在于 DateTimeBox 还包含了时间部分。 DateBox ...
EasyUI的Datebox组件是一个常用的日期选择器,能够方便地集成到网页中,为用户提供日期选择的功能。本文将详细介绍如何使用EasyUI Datebox设置时间限制,包括开始时间与结束时间的关联限制,以及确保截止日期始终...
描述中提到,"一般插件不能只选年月",这反映了一个常见的问题,即大多数现成的UI框架如EasyUI或Bootstrap提供的日期选择器默认包含完整的日期范围,包括日、月、年。开发者如果想要定制成只显示年月的控件,需要对...
标题提到的“EasyUi图标扩展样式大全(1700个)”是一个专门针对EasyUi的图标库增强方案,旨在解决EasyUI默认图标样式不足和美观度不高的问题。 这个扩展样式大全包含了1700个图标,大大增加了EasyUI在设计界面时的...
为了方便使用,压缩包中的"EasyUi图标扩展样式"很可能包含了图标图片文件(如PNG或SVG格式)以及对应的CSS文件,开发者只需要将这些文件引入到项目中,就可以立即享受到丰富的图标资源。同时,根据项目的需求,...
EasyUI Datebox 是一款基于jQuery和EasyUI框架的日期选择插件,它提供了丰富的样式和功能,使得用户在界面上能够方便地选择日期。本文将详细讲解如何使用EasyUI Datebox 进行日期验证,特别是实现开始日期小于结束...
扩展图标的使用方法与常规Easyui图标基本一致,这意味着开发者不需要进行额外的编程工作,只需按照既有的规则引入和应用这些图标即可。下面将详细介绍Easyui图标的相关知识点: 1. **图标引入**:在Easyui中,图标...
实现easyui的datebox格式化。效果如下,用“++”隔开,看你喜欢用什么都可以。 1、html 证件有效期至: <span><input id=passvali name=hotel.passvali> 2、js /* 证件有效期至 */ $('#passvali')....
EasyUI图标扩展样式是针对EasyUI框架的一种增强,旨在提供更多的视觉元素,以满足开发者在构建用户界面时对个性化和多样性的需求。EasyUI是一个基于jQuery的轻量级且易于使用的前端开发框架,它提供了丰富的组件,如...
"EasyUI 扩展ICON图标" 提供了一个解决方案,它增加了1775个额外的图标,大大丰富了EasyUI的图标库。这些图标可能是矢量图形,可以在不同分辨率和尺寸下保持清晰,同时涵盖了各种常见的功能类别,如导航、操作、状态...
easyui日期控件只选择到月份,保存记录一下。 <input id="month" class="easyui-datetimebox" name="month" data-options="required:true,formatter:myformatter,parser:myParser" 160px" />
EasyUi图标扩展样式是针对EasyUI框架的一种定制化设计,旨在优化和增强默认图标的视觉效果和使用体验。EasyUI是一个轻量级的JavaScript库,主要用于构建用户界面,它基于jQuery,提供了丰富的组件和主题,使得开发者...
5. **响应式设计**:EasyUi图标扩展样式通常已经考虑了响应式设计,但你仍需根据实际项目需求进行调整,确保在不同设备和屏幕尺寸下都能正常显示。 6. **测试与优化**:在实际应用中,需要进行充分的测试,检查各个...