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;

}