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/