easyUI datebox 日期只显示年月及年月日切换的实现 js样式重新渲染加载

记录一下，最近的做的一个功能，需要在easyUI的日期框datebox 中，只显示年月格式，同时，还需要切换到年月日的格式

第一步：如何显示年月日，默认当前一天

如下代码是：报表日期及时间选择框

  报表日期：
<span id="reportdate_box">
    <input type="text" id="start_time" name="start_time"  class="easyui-datebox"  style="width:220px;height:26px" data-options="required:true" />
</span>

 

$(document).ready(function() {	
	//设置时间不可手动输入或者删除
	$('#start_time').datebox({   
	    editable:false  
	});
  //先设置时间
var curDate = getServerTime();
var preDate = new Date(curDate.getTime() - 24*60*60*1000); //前一天
var dateStr = myformatter(preDate);
$("#start_time").datebox("setValue", dateStr);
		       	
});	
//获取服务器上的时间，而非用户浏览器端的时间
function getServerTime(){
	    return new Date($.ajax({async: false}).getResponseHeader("Date"));
	}

//格式化时间
			function myformatter(date){  
		        var y = date.getFullYear();  
		        var m = date.getMonth()+1;  
		       	var d = date.getDate(); 
		       	 return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);  
		  
		    } 

 

 

 

 

核心js代码，databox只显示年月。

  function getYearMth(mthid){
	  var db = $('#'+mthid);
	    db.datebox({
	        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 = /\d{4}/.exec(span.html())[0]//得到年份
	                    , month = parseInt($(this).attr('abbr'), 10); //月份，这里不需要+1
	                    db.datebox('hidePanel')//隐藏日期对象
	                    .datebox('setValue', year + '-' + month); //设置日期的值
	                });
	            }, 0);
	            yearIpt.unbind();//解绑年份输入框中任何事件
	        },
	        parser: function (s) {
	            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) {
	        	var m =parseInt(d.getMonth())+1;
				if(m>9){
					return d.getFullYear() + '-' + (parseInt(d.getMonth())+1); 
				}else{
					return d.getFullYear() + '-0' + (parseInt(d.getMonth())+1); 
				}
	        }
	    });
	    var p = db.datebox('panel'), //日期选择对象
	        tds = false, //日期选择对象中月份
	        aToday = p.find('a.datebox-current'),
	        yearIpt = p.find('input.calendar-menu-year'),//年份输入框
	        //显示月份层的触发控件
	        span = aToday.length ? p.find('div.calendar-title span') ://1.3.x版本
	        p.find('span.calendar-text'); //1.4.x版本
	    if (aToday.length) {//1.3.x版本，取消Today按钮的click事件，重新绑定新事件设置日期框为今天，防止弹出日期选择面板
	        aToday.unbind('click').click(function () {
	            var now=new Date();
	            if(parseInt(now.getMonth())+1>9){
	                db.datebox('hidePanel').datebox('setValue', now.getFullYear() + '-' + (now.getMonth() + 1));
	            }else{
	                db.datebox('hidePanel').datebox('setValue', now.getFullYear() + '-0' + (now.getMonth() + 1));
	            }
	        });
	    }
  }

 

 

 

 

切换到显示年月日时间类型时，重新HTML内容。

function chooseDay(){
	$("#reportdate_box").text("");
	var newdatebox ='<input type="text" id="start_time" name="start_time"  class="easyui-datebox" style="width:220px;height:26px" data-options="" />';
	$("#reportdate_box").html(newdatebox);
	//重新加载easyUI样式
	$.parser.parse('#reportdate_box')
	setTime();  //先设置时间
	fillAllData();
}