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