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日期格式，就會導致選擇日輸出的還是年月，而不是年月日