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

easyui datebox定位到某一个日期，

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

easyui datebox MoveTo方法使用

 

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

©Copyright 蕃薯耀 2017年5月8日

http://www.cnblogs.com/fanshuyao/

 

一、问题描述：

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

 

二、解决方案

Html代码  

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

 

Js代码  

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

 

Js处理日期的方法：

Js代码  

1. /** 
2.  * 日期解析，字符串转日期 
3.  * @param dateString 可以为2017-02-16，2017/02/16，2017.02.16 
4.  * @returns {Date} 返回对应的日期对象 
5.  */  
6. function dateParse(dateString){  
7.     var SEPARATOR_BAR = "-";  
8.     var SEPARATOR_SLASH = "/";  
9.     var SEPARATOR_DOT = ".";  
10.     var dateArray;  
11.     if(dateString.indexOf(SEPARATOR_BAR) > -1){  
12.         dateArray = dateString.split(SEPARATOR_BAR);    
13.     }else if(dateString.indexOf(SEPARATOR_SLASH) > -1){  
14.         dateArray = dateString.split(SEPARATOR_SLASH);  
15.     }else{  
16.         dateArray = dateString.split(SEPARATOR_DOT);  
17.     }  
18.     return new Date(dateArray[0], dateArray[1]-1, dateArray[2]);   
19. };  
20.   
21. /** 
22.  * 日期加减多少天 
23.  * @param dateObj 日期对象 
24.  * @param days 加减天数 
25.  * @returns 
26.  */  
27. function dateAdd(dateObj, days){  
28.     dateObj.setDate(dateObj.getDate() + days);  
29.     return dateObj;  
30. };  

 

三、注意事项：

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

Js代码  

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

 

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

 

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

 

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

 

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

最后代码优化成这样：

Js代码  

1. $(function() {  
2.     var contractEndtimeCurrent = $("#contractEndtimeCurrent").val();  
3.     if(!isEmpty(contractEndtime)){//限制展期日期  
4.         var beginDate = dateParse(contractEndtimeCurrent);   
5.         $('#contractEndtime').datebox().datebox('calendar').calendar({  
6.             validator: function(date){  
7.                 return beginDate < date;  
8.             }  
9.         });  
10.           
11.         $('#contractEndtime').datebox({  
12.             onShowPanel : function(){  
13.                 $(this).datebox('calendar').calendar("moveTo",  dateAdd(dateParse(contractEndtimeCurrent), 1));  
14.             }  
15.         });  
16.     }  
17. });  

 

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

©Copyright 蕃薯耀 2017年5月8日

http://www.cnblogs.com/fanshuyao/