在網上找了一些借鑑 改了一些代碼 效果如下:
兩邊的datebox都只顯示到年月 不顯示日
代碼如下:
//aspx代碼
<input id="txtStartTime" type="text" class="easyui-datebox" style="width: 150px;">
<input id="txtEndTime" type="text" class="easyui-datebox" style="width: 150px;">
//js代碼
//日期框設置
$('#txtStartTime').datebox({
width: "120px;",
onShowPanel: function () {//顯示日趨選擇對象後再觸發彈出月份層的事件,初始化時沒有生成月份層
span.trigger('click'); //觸發click事件彈出月份層
if (!tds) setTimeout(function () {//延時觸發獲取月份對象,因爲上面的事件觸發和對象生成有時間間隔
tds = p.find('div.calendar-menu-month-inner td');
tds.click(function (e) {
e.stopPropagation(); //禁止冒泡執行easyui給月份綁定的事件
var year = $(".calendar-menu-year").val();
var month = parseInt($(this).attr('abbr'), 10);
$('#txtStartTime').datebox('hidePanel')//隱藏日期對象
.datebox('setValue', year + '-' + month); //設置日期的值
});
}, 0)
},
parser: function (s) {//配置parser,返回選擇的日期
if (!s) return new Date();
var ss = (s.split('-'));
var y = parseInt(ss[0], 10);
var m = parseInt(ss[1], 10);
if (!isNaN(y) && !isNaN(m)) {
return new Date(y, m - 1);
} else {
return new Date();
}
},
formatter: function (d) {
debugger;
var y = d.getFullYear();
var m = d.getMonth() + 1;
var d = d.getDate();
return y + '-' + (m < 10 ? ('0' + m) : m);
}//配置formatter,只返回年月
});
var p = $('#txtStartTime').datebox('panel'), //日期選擇對象
tds = false, //日期選擇對象中月份
span = p.find('span.calendar-text'); //顯示月份層的觸發控件
$('#txtEndTime').datebox({
width: "120px;",
onShowPanel: function () {//顯示日趨選擇對象後再觸發彈出月份層的事件,初始化時沒有生成月份層
span1.trigger('click'); //觸發click事件彈出月份層
if (!tds1) setTimeout(function () {//延時觸發獲取月份對象,因爲上面的事件觸發和對象生成有時間間隔
tds1 = h.find('div.calendar-menu-month-inner td');
tds1.click(function (e) {
e.stopPropagation(); //禁止冒泡執行easyui給月份綁定的事件
var year = $(".calendar-menu-year").val();
var month = parseInt($(this).attr('abbr'), 10);
$('#txtEndTime').datebox('hidePanel')//隱藏日期對象
.datebox('setValue', year + '-' + month); //設置日期的值
});
}, 0)
},
parser: function (s) {//配置parser,返回選擇的日期
if (!s) return new Date();
var ss = (s.split('-'));
var y = parseInt(ss[0], 10);
var m = parseInt(ss[1], 10);
if (!isNaN(y) && !isNaN(m)) {
return new Date(y, m - 1);
} else {
return new Date();
}
},
formatter: function (d) {
debugger;
var y = d.getFullYear();
var m = d.getMonth() + 1;
var d = d.getDate();
return y + '-' + (m < 10 ? ('0' + m) : m);
}//配置formatter,只返回年月
});
var h = $('#txtEndTime').datebox('panel'), //日期選擇對象
tds1 = false, //日期選擇對象中月份
span1 = h.find('span.calendar-text'); //顯示月份層的觸發控件