easyUI框架下实现日期按年,年月,年月日方式显示

第一次使用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日期格式,就会导致选择日输出的还是年月,而不是年月日

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值