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‘)

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-13 07:12:22

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

easyui的datebox只显示年月

要求点击easyui的datebox时只显示年月,隐藏日,之前百度了好多,发现有的好麻烦,有的使用没效果,也许自己没理解,改不了.最后老员工帮我搞定了,添加一个fomatter和一个parser函数就行. 当然我学习到的一点就是调试,之前只会用类似alert和console.info进行调试,然而这两种方法对easyui中的这种方法不奏效,比我我想知道parser中的function中的参数date值到底是什么,用这两种方法是没用的,用console.log(date);就可以看到date的值,

easyui datebox 只显示年月

在网上看了好多的js源码 点击12月份都会变成2017-0 这样的 调试后发现了问题,在此发修改后的方法 //只显示年月 function convertDatebox(domId) { $("#" + domId).datebox({ onShowPanel: function () {//显示日趋选择对象后再触发弹出月份层的事件,初始化时没有生成月份层 span.trigger('click'); //触发click事件弹出月份层 if (!tds) setTimeout(func

extjs 时间控件只显示年月

调用代码一: [javascript] view plain copy print ? var monthField = new Ext.ux.MonthField({ id:'month', fieldLabel: '月份', allowBlank:false, readOnly : true, format:'Y年m月', listeners:{"blur":function(){ alert() }} ); 调用代码二(部分): [javascript] view plain c

Android DataPickerDialog组建只显示年月或月日

最近几天再做一个App开发,开发时需要使用DatePickerDialog来只显示年月,在网上参考了不少的例子,有的自己琢磨不透,所幸看到了(这里请参考http://whb198900.blog.163.com/blog/static/766453542012108111920879)这位朋友的文章以及http://download.csdn.net/detail/u010372772/6027761这里边的代码,自己又进行了总结,总之,完成了自己的任务. 1 public class Seco

wpf 时间控件只显示年月

最近的项目,查询时只需要年和月,不需要日,因此需要对原有的DatePicker进行修改,查询了网上的内容,最终从一篇帖子里看到了添加附加属性的方法,地址是http://stackoverflow.com/questions/1798513/wpf-toolkit-datepicker-month-year-only 原文是用了两个类,其中一个是为了让DatePicker下的Calendar只显示年月,不显示日,另一个类是为了让DatePicker格式化为yyyy-MM格式,但是从文章中可以看出,

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

zui框架配置日期控件datetimepicker只显示年月 <!DOCTYPE html> <head> <script src="~/Scripts/jquery-1.11.3.min.js"></script> <script src="~/res/zui-1.9.1-dist/dist/js/zui.min.js"></script> <script src="~/res

easyui datebox只显示年月隐藏日期的实现

工作中两次遇到需要实现只实现年月的时间控件效果,特地把网上查到的实现方法记录下来,以备再次需要时用到.上代码 var dateobj=function(obj){ var need_obj={ onShowPanel: function () {//显示日趋选择对象后再触发弹出月份层的事件,初始化时没有生成月份层 span.trigger('click'); //触发click事件弹出月份层 if (!tds) setTimeout(function () {//延时触发获取月份对象,因为上面的

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

标题问题的答案在OSChina中 http://www.oschina.net/question/2282354_224401?fromerr=lHJTcN89 我还是把这个记录下来 ================================================================= <input id="dlgReleaseTime" class="easyui-datebox"></input> $('#dl

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

从别人的博客园搬过来的,放在这里只是为了方便自己用.已经注明原文出处,尊重别人的劳动成果. 原文地址:http://www.cnblogs.com/hmYao/p/5779463.html 此日历插件依赖于easyui的js和css. html: <input id="db" /> js: 初始化加载db标签 $('#db').datebox({ onShowPanel: function() { //显示日趋选择对象后再触发弹出月份层的事件,初始化时没有生成月份层 spa