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

easyui datebox定位到某一个日期，

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

easyui datebox MoveTo方法使用

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

©Copyright 蕃薯耀 2017年5月8日

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

一、问题描述：

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

二、解决方案

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

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

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. * @param dateObj 日期对象
23. * @param days 加减天数
24. * @returns
25. */
26. function dateAdd(dateObj, days){
27. dateObj.setDate(dateObj.getDate() + days);
28. return dateObj;
29. };

三、注意事项：

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

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

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

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

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

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

最后代码优化成这样：

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. $('#contractEndtime').datebox({
11. onShowPanel : function(){
12. $(this).datebox('calendar').calendar("moveTo",  dateAdd(dateParse(contractEndtimeCurrent), 1));
13. }
14. });
15. }
16. });

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

©Copyright 蕃薯耀 2017年5月8日

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