easyui datebox 扩展 只显示年月
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 扩展 只显示年月的更多相关文章
- easyui的datebox只显示年月
要求点击easyui的datebox时只显示年月,隐藏日,之前百度了好多,发现有的好麻烦,有的使用没效果,也许自己没理解,改不了.最后老员工帮我搞定了,添加一个fomatter和一个parser函数就 ...
- easyui datebox时间控件如何只显示年月
easyui datebox控件,只显示年月,不显示年月日 需要的效果图如下: 具体的js代码: <script> $(function(){ intiMonthBox('costTime ...
- 自定义一个只显示年月的DatePicker(UIDatePicker无法实现年月显示)
HooDatePicker 介绍(introduction) ==================================================项目需要一个DatePicker,只显 ...
- zui框架配置日期控件只显示年月
zui框架配置日期控件datetimepicker只显示年月 <!DOCTYPE html> <head> <script src="~/Scripts/jqu ...
- 转 EasyUi日期控件datebox设置,只显示年月,也只能选择年月
1.引入Jquery和easyui,注低版本的Jquery和easy不能使用,这里使用的Jquery是1.8.2easyui是1.6.1.1.easyui下载地址:http://www.jeasyui ...
- JQuery EasyUI 日期控件 怎样做到只显示年月,而不显示日
标题问题的答案在OSChina中 http://www.oschina.net/question/2282354_224401?fromerr=lHJTcN89 我还是把这个记录下来 ======== ...
- EasyUI Calendar 日历插件,只显示年月。
从别人的博客园搬过来的,放在这里只是为了方便自己用.已经注明原文出处,尊重别人的劳动成果. 原文地址:http://www.cnblogs.com/hmYao/p/5779463.html 此日历插件 ...
- easyui只显示年月,时间格式
<div > <input id="db" /> </div> <script> /*power by showbo http:// ...
- easyui时间框只选择年月
html: <input type="text" id="datetime" > js: <script type="text/ja ...
随机推荐
- 启动Nodejs服务
vs code 中间创建 1. settings.json { , { , { 'Content-Type': 'text/plain;charset=utf-8' })
- wifi,Android渗透之arp欺骗
查看自己wifi ip段 查看有哪些用户连接了此wifi,下图标记处为我的测试机(华为) 攻击开始,如果开启了arp防火墙,就会有提示 开启图片捕获
- Python函数初识
一.函数是什么 计算机语言中的函数是类比于数学中的函数演变来的,但是又有所不同.前面的知识中我们学会了运用基础语法(列表.字典)和流程控制语句貌似也能处理一些复杂的问题,但是相对于相似的大量重复性 ...
- spring-session实现分布式集群session的共享(转)
原文: https://www.cnblogs.com/youzhibing/p/7348337.html HttpSession是通过Servlet容器创建和管理的,像Tomcat/Jetty都是保 ...
- centos下设置自启动和配置环境变量的方法
1. 设置自启动 在CentOS系统下,主要有两种方法设置自己安装的程序开机启动.1.把启动程序的命令添加到/etc/rc.d/rc.local文件中,比如下面的是设置开机启动httpd. #!/bi ...
- DWR、Comet4j在Nginx+Tomcat组合下的优化
DWR.Comet4j这类推送框架在Tomcat下运行正常,但在nginx+tomcat组合下,可能会出现断连.延迟等各种问题. 如出现此类问题,可尝试以下优化方式: 1.Nginx-----ngin ...
- PAT 1001 A+B Fotmat
源码 1001. A+B Format (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Calcula ...
- vue 中ref 的使用注意事项
最近看别人的项目发现有些语法不能理解,所以百度进行了学习.现在总结一下. ref 有两种用法 1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2.ref 加在子组件上 ...
- poi excel导入 数字自动加小数点
问题:导入excel表,若表格中为整数数字,不管单元格设置成数字格式还是文本格式,导入时都会出现小数点和0. 我遇到的问题是:一个名称,做测试数据的时候做了纯整形数字,发现了这个问题. 解决办法:在代 ...
- 014 C语言文法定义与C程序的推导过程