easyui datebox定位到某一个日期，easyui datebox直接定位到具体的日期，easyui datebox MoveTo方法使用

easyui datebox定位到某一个日期，

easyui datebox直接定位到具体的日期，

easyui datebox MoveTo方法使用

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

©Copyright 蕃薯耀 2017年5月8日

http://fanshuyao.iteye.com/

 

一、问题描述：

当需要在打开Datebox的时候，定位到具体某一天的日期（即日历打开的月份有那个日期，不用再翻页找）

 

二、解决方案

<input class="f1 easyui-datebox" id="contractEndtime" name="contractEndtime" data-options="required:true,editable:false"/>

 

$('#contractEndtime').datebox({
    onShowPanel : function(){
        $(this).datebox('calendar').calendar("moveTo", dateAdd(dateParse(contractEndtimeCurrent), 1));
    }
});

 

Js处理日期的方法：

/**
 * 日期解析，字符串转日期
 * @param dateString 可以为2017-02-16，2017/02/16，2017.02.16
 * @returns {Date} 返回对应的日期对象
 */
function dateParse(dateString){
	var SEPARATOR_BAR = "-";
	var SEPARATOR_SLASH = "/";
	var SEPARATOR_DOT = ".";
	var dateArray;
	if(dateString.indexOf(SEPARATOR_BAR) > -1){
		dateArray = dateString.split(SEPARATOR_BAR);  
	}else if(dateString.indexOf(SEPARATOR_SLASH) > -1){
		dateArray = dateString.split(SEPARATOR_SLASH);
	}else{
		dateArray = dateString.split(SEPARATOR_DOT);
	}
	return new Date(dateArray[0], dateArray[1]-1, dateArray[2]); 
};

/**
 * 日期加减多少天
 * @param dateObj 日期对象
 * @param days 加减天数
 * @returns
 */
function dateAdd(dateObj, days){
	dateObj.setDate(dateObj.getDate() + days);
	return dateObj;
};

 

三、注意事项：

1、moveTo方法是calendar对象的，datebox继承中有calendar，可以使用其里面的方法，调用方式如下：

$('#contractEndtime').datebox('calendar').calendar("moveTo",  dateAdd(dateParse(contractEndtimeCurrent), 1));

 

2、onShowPanel事件是combo对象的事件。

 

3、由于在项目中的datebox中设置了时间限制，不能小于某个时间，所以在定位到具体的某个日期的时候，那个日期不能是禁用的日期，因为定位到禁用的日期不起作用。

 

4、顺序问题，如下图所示

 

其中1、2的位置没有效果，3、4的位置有效果，具体原来不清楚。

最后代码优化成这样：

$(function() {
	var contractEndtimeCurrent = $("#contractEndtimeCurrent").val();
	if(!isEmpty(contractEndtime)){//限制展期日期
		var beginDate = dateParse(contractEndtimeCurrent); 
		$('#contractEndtime').datebox().datebox('calendar').calendar({
			validator: function(date){
				return beginDate < date;
			}
		});
		
		$('#contractEndtime').datebox({
			onShowPanel : function(){
				$(this).datebox('calendar').calendar("moveTo",  dateAdd(dateParse(contractEndtimeCurrent), 1));
			}
		});
	}
});

 
 

 

 

 

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

©Copyright 蕃薯耀 2017年5月8日

http://fanshuyao.iteye.com/

评论

1 楼 蕃薯耀 2017-05-08  

easyui datebox定位到某一个日期，
easyui datebox直接定位到具体的日期，
easyui datebox MoveTo方法使用

>>>>>>>>>>>>>
蕃薯耀