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

easyui datebox定位到某一个日期，

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

easyui datebox MoveTo方法使用

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

©Copyright 蕃薯耀 2017年5月8日

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

一、问题描述：

当需要在打开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://www.cnblogs.com/fanshuyao/