第一次使用easyUI,需求要求按照不同方式显示时间,于是自己尝试通过API和网上别人的一些思路来进行一番改造,想要更改easyui的时间格式,主要是基于API中parser属性和formatter属性,通过解析日期字符串格式和格式化自己需要的日期格式即可完成
显示年月日的代码
首先是显示年月的代码<pre name="code" class="javascript">$("#time2").click(function(){
$('#date1').datebox({
parser: function (s) {//配置parser,返回选择的日期
if (!s) return new Date();
var arr = s.split('-');
return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10)-1, 1);
},
formatter: function (d) { return d.getFullYear() + '-' +parseInt(d.getMonth()+1) ; }//配置formatter,只返回年月
});
$('#date1').datebox({
parser: function (s) {//配置parser,返回选择的日期
if (!s) return new Date();
var arr = s.split('-');
return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10)-1, 1);
},
formatter: function (d) { return d.getFullYear() + '-' +parseInt(d.getMonth()+1) ; }//配置formatter,只返回年月
});
var p = $('#date').datebox('panel'), //日期选择对象
tds = false, //日期选择对象中月份
span = p.find('span.calendar-text'); //显示月份层的触发控件
});
只显示年的代码
$('#time3').click(function(){
$('#date').datebox({
parser: function (s) {//配置parser,返回选择的日期
if (!s) return new Date();
return new Date(s, 2, 1);
},
formatter: function (d) {
return d.getFullYear();
}//配置formatter,只返回年月
});
$('#date1').datebox({
parser: function (s) {//配置parser,返回选择的日期
if (!s) return new Date();
return new Date(s, 2, 1);
},
formatter: function (d) {
return d.getFullYear();
}//配置formatter,只返回年月
});
var p = $('#date').datebox('panel'), //日期选择对象
tds = false, //日期选择对象中月份
span = p.find('span.calendar-text'); //显示月份层的触发控件
});
显示年月日的代码
$('#time1').click(function(){
$('#date').datebox({
parser: function (s) {//配置parser,返回选择的日期
if (!s) return new Date();
var arr = s.split('-');
return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10)-1, parseInt(arr[2], 10));
},
formatter: function (d) {
return d.getFullYear() + '-' +parseInt(d.getMonth()+1) + '-' +parseInt(d.getDate()) ;
}//配置formatter,只返回年月
});
$('#date1').datebox({
parser: function (s) {//配置parser,返回选择的日期
if (!s) return new Date();
return new <span style="font-family: Arial, Helvetica, sans-serif;"> Date(parseInt(arr[0], 10), parseInt(arr[1], 10)-1, parseInt(arr[2], 10))</span><span style="font-family: Arial, Helvetica, sans-serif;">;</span>
},
formatter: function (d) {
return d.getFullYear() + '-' +parseInt(d.getMonth()+1) + '-' +parseInt(d.getDate()) ;
//return d.getFullYear();
}//配置formatter,只返回年月
});
var p = $('#dd').datebox('panel'), //日期选择对象
tds = false, //日期选择对象中月份
span = p.find('span.calendar-text'); //显示月份层的触发控件
});
1,代码中的time1,time2,time3对应的是图中 日,月,年的id,date,date1对应的是图中两个日期控件的id
2需要注意的是,由于都采用了formatter的格式化日期格式,所以在点击月后,如果在点击日,不去写一个方法重新formatter日期格式,就会导致选择日输出的还是年月,而不是年月日