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、顺序问题,如下图所示

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

其中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/

上一篇:iTextSharp使用字体设置摘录


下一篇:[故障公告]阿里云“华东1地域部分负载均衡https访问异常“引起部分站点无法访问