记录 Ext 日历月份选择控件bug解决过程结果

目录

  • 背景
  • 代码

背景

项目使用 Ext.NET 2.2.0.40838 , 对应 Ext JS4.2 版本。 结果 2017/3/31 号的时候偶然间点日历选择控件选择2月,10月等月份突然就跳到3月份,9月份之类。 就是无法选择, 选择谷歌以后发现有同样的问题, 然后各种尝试, 重写了默认属性,如下代码后解决。 收获就是调用平台有时候要知道原因才能找到未知原因并修复. 宝贵的额是Ext框架问题解决思路吧.

现记录。 改动的部分就是 dt.setDate(1); 这一句, 设置为当前月份第一天。

代码

  • 原则上放到公共js里面, 然后就行了, 确保生效。 当然也可以放在页面里面调试, 先看看是不是可行。 本项目验证通过。
//修复日期月份模式下在本地日期为31号时跳到下个月的问题 2017年3月31日

(function () { 

if(!window.Ext){return;}
if(!window.Ext.Date){return;}

Ext.Date.createParser = function (format) {
    var utilDate = Ext.Date;

    var xf = function (format) {
        var args = Array.prototype.slice.call(arguments, 1);

        var numberTokenRe = /\{(\d+)\}/g;

        return format.replace(numberTokenRe, function (m, i) {
            return args[i];
        });
    }

    var code = [
    // date calculations (note: the code below creates a dependency on Ext.Number.from())
        "var me = this, dt, y, m, d, h, i, s, ms, o, O, z, zz, u, v, W, year, jan4, week1monday,",
            "def = me.defaults,",
            "from = Ext.Number.from,",
            "results = String(input).match(me.parseRegexes[{0}]);", // either null, or an array of matched strings

        "if(results){",
            "{1}",

            "if(u != null){", // i.e. unix time is defined
                "v = new Date(u * 1000);", // give top priority to UNIX time
            "}else{",
    // create Date object representing midnight of the current day;
    // this will provide us with our date defaults
    // (note: clearTime() handles Daylight Saving Time automatically)
                "dt = me.clearTime(new Date);dt.setDate(1);",

                "y = from(y, from(def.y, dt.getFullYear()));",
                "m = from(m, from(def.m - 1, dt.getMonth()));",
                "d = from(d, from(def.d, dt.getDate()));",

                "h  = from(h, from(def.h, dt.getHours()));",
                "i  = from(i, from(def.i, dt.getMinutes()));",
                "s  = from(s, from(def.s, dt.getSeconds()));",
                "ms = from(ms, from(def.ms, dt.getMilliseconds()));",

                "if(z >= 0 && y >= 0){",
    // both the year and zero-based day of year are defined and >= 0.
    // these 2 values alone provide sufficient info to create a full date object

    // create Date object representing January 1st for the given year
    // handle years < 100 appropriately
                    "v = me.add(new Date(y < 100 ? 100 : y, 0, 1, h, i, s, ms), me.YEAR, y < 100 ? y - 100 : 0);",

    // then add day of year, checking for Date "rollover" if necessary
                    "v = !strict? v : (strict === true && (z <= 364 || (me.isLeapYear(v) && z <= 365))? me.add(v, me.DAY, z) : null);",
                "}else if(strict === true && !me.isValid(y, m + 1, d, h, i, s, ms)){", // check for Date "rollover"
                    "v = null;", // invalid date, so return null
                "}else{",
                    "if (W) {", // support ISO-8601
    // http://en.wikipedia.org/wiki/ISO_week_date
    //
    // Mutually equivalent definitions for week 01 are:
    // a. the week starting with the Monday which is nearest in time to 1 January
    // b. the week with 4 January in it
    // ... there are many others ...
    //
    // We'll use letter b above to determine the first week of the year.
    //
    // So, first get a Date object for January 4th of whatever calendar year is desired.
    //
    // Then, the first Monday of the year can easily be determined by (operating on this Date):
    // 1. Getting the day of the week.
    // 2. Subtracting that by one.
    // 3. Multiplying that by 86400000 (one day in ms).
    // 4. Subtracting this number of days (in ms) from the January 4 date (represented in ms).
    //
    // Example #1 ...
    //
    //       January 2012
    //   Su Mo Tu We Th Fr Sa
    //    1  2  3  4  5  6  7
    //    8  9 10 11 12 13 14
    //   15 16 17 18 19 20 21
    //   22 23 24 25 26 27 28
    //   29 30 31
    //
    // 1. January 4th is a Wednesday.
    // 2. Its day number is 3.
    // 3. Simply substract 2 days from Wednesday.
    // 4. The first week of the year begins on Monday, January 2. Simple!
    //
    // Example #2 ...
    //       January 1992
    //   Su Mo Tu We Th Fr Sa
    //             1  2  3  4
    //    5  6  7  8  9 10 11
    //   12 13 14 15 16 17 18
    //   19 20 21 22 23 24 25
    //   26 27 28 29 30 31
    //
    // 1. January 4th is a Saturday.
    // 2. Its day number is 6.
    // 3. Simply subtract 5 days from Saturday.
    // 4. The first week of the year begins on Monday, December 30. Simple!
    //
    // v = Ext.Date.clearTime(new Date(week1monday.getTime() + ((W - 1) * 604800000)));
    // (This is essentially doing the same thing as above but for the week rather than the day)
                        "year = y || (new Date()).getFullYear(),",
                        "jan4 = new Date(year, 0, 4, 0, 0, 0),",
                        "week1monday = new Date(jan4.getTime() - ((jan4.getDay() - 1) * 86400000));",
                        "v = Ext.Date.clearTime(new Date(week1monday.getTime() + ((W - 1) * 604800000)));",
                    "} else {",
    // plain old Date object
    // handle years < 100 properly
                        "v = me.add(new Date(y < 100 ? 100 : y, m, d, h, i, s, ms), me.YEAR, y < 100 ? y - 100 : 0);",
                    "}",
                "}",
            "}",
        "}",

        "if(v){",
    // favor UTC offset over GMT offset
            "if(zz != null){",
    // reset to UTC, then add offset
                "v = me.add(v, me.SECOND, -v.getTimezoneOffset() * 60 - zz);",
            "}else if(o){",
    // reset to GMT, then add offset
                "v = me.add(v, me.MINUTE, -v.getTimezoneOffset() + (sn == '+'? -1 : 1) * (hr * 60 + mn));",
            "}",
        "}",

        "return v;"
      ].join('\n');

    var regexNum = utilDate.parseRegexes.length,
            currentGroup = 1,
            calc = [],
            regex = [],
            special = false,
            ch = "",
            i = 0,
            len = format.length,
            atEnd = [],
            obj;

    for (; i < len; ++i) {
        ch = format.charAt(i);
        if (!special && ch == "\\") {
            special = true;
        } else if (special) {
            special = false;
            regex.push(Ext.String.escape(ch));
        } else {
            obj = utilDate.formatCodeToRegex(ch, currentGroup);
            currentGroup += obj.g;
            regex.push(obj.s);
            if (obj.g && obj.c) {
                if (obj.calcAtEnd) {
                    atEnd.push(obj.c);
                } else {
                    calc.push(obj.c);
                }
            }
        }
    }

    calc = calc.concat(atEnd);

    utilDate.parseRegexes[regexNum] = new RegExp("^" + regex.join('') + "$", 'i');
    utilDate.parseFunctions[format] = Ext.functionFactory("input", "strict", xf(code, regexNum, calc.join('')));

}
})();

原文地址:https://www.cnblogs.com/hijushen/p/10468660.html

时间: 2024-10-23 11:12:32

记录 Ext 日历月份选择控件bug解决过程结果的相关文章

自定义日历(四)-区间选择控件

目录 一.概述 二.效果展示 三.整体结构 四.分析实现 1.QPickDate 2.QDatePanel 3.QDateWidget.QDateContent 4. 调度绘制 五.相关文章 原文链接:自定义日历(四)-区间选择控件 一.概述 很早很早以前,写过几篇关于日历的文章,不同于Qt原生的控件,这些控件都是博主使用自绘的方式进行完成,因此可定制性更强一些,感兴趣的可以参考自定义日历(一).自定义日历(二)和自定义日历(三)). 本篇文章还是继续来写我们的日历控件,仍然采用自绘的方式,带来

用c/c++混合编程方式为ios/android实现一个自绘日期选择控件(一)

本文为原创,如有转载,请注明出处:http://www.cnblogs.com/jackybu 前言 章节: 1.需求描述以及c/c++实现日期和月历的基本操作 2.ios实现自绘日期选择控件 3.android实现自绘日期选择控件 目的: 通过一个相对复杂的自定义自绘控件来分享: 1.ios以及android自定义自绘控件的开发流程 2.objc与c/c++混合编程 3.android ndk的环境配置,android studio ndk的编译模式,swig在android ndk开发中的作

框架 day49 BOS项目练习3(修复window控件BUG,添加/修改/作废取派员,datagrid使用,分页查询(DetachedCriteria离线),formatter函数)

BOS项目笔记第3天 1.    修复window控件bug 把弹出窗口拖动到浏览器窗口外之后无法再拖动     将提供的outOfBounds.js文件复制到项目中     在需要修复的jsp页面引入js文件,可以阻止控件拖出窗口 <script src="${pageContext.request.contextPath }/js/easyui/outOfBounds.js" type="text/javascript"></script&

控制控件(滑杆,分段选择控件,开关按钮)

// //  ViewController.m //  UI-NO-9 // //  Created by Bruce on 15/7/23. //  Copyright (c) 2015年 Bruce. All rights reserved. //   #import "ViewController.h"   @interface ViewController () {     UIView *bgView;     UIImageView *animationView; } @e

双日历日期选择控件

近期,需要在项目里使用日历,经过多方选择,最后决定使用 daterangepicker  (http://www.daterangepicker.com),代码下载地址 https://github.com/dangrossman/bootstrap-daterangepicker 但是,该控件是一个日期范围选择控件,使用singleDatePicker 可以变成单日期选择控件,但是只显示一个日期. 看了一下源代码,主要是在 daterangepicker.js 的有一段代码,注释掉即可:如下

ExtJs4 笔记(9) Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件 (转 )出处:[Lipan] (http://www.cnblogs.com/lipan/)

本篇讲解三个容器类控件. 一.面板控件 Ext.Panel 一个面板控件包括几个部分,有标题栏.工具栏.正文.按钮区.标题栏位于最上面,工具栏可以在四个位置放置,围绕中间部分正文,按钮区位于最小方.下面介绍几个基本配置项: 1.title:设置面板标题文本. 2.tbar,lbar,rbar,bbar:分别设置上.左.右.下四个部位的工具栏. 3.html,items:前者用来设置正文部分的html,后者设置正文部分的ext控件. 4.buttons:设置按钮区的按钮. 下面看看面板生成代码:

C#学习笔记(20140911)-下拉框、日历、pannel控件的使用

晚上学习了下拉框.日历.pannel控件的使用,这几个控件看上去好像没有之前的一些控件那么简单,但是使用起来还是很方便.使用完了后,才发现真的和之前的几种控件差不多. 最了一个小小的模块:每日签到填写心情模块. 主要功能有: 1. 点击日历可以填写签到日期,并在签到内容中自动添加: 2. 可以选择心情,已经写好三种心情供选择.只需要选择一下就可以自动把心情填写到今日心情展示模块中,使用起来很方便. 3. 手动填写心情.手懂填写的时候可以和日期.选择的心情一起自动填写到心情展示区. 4. 历史心情

Android自定义View(RollWeekView-炫酷的星期日期选择控件)

转载请标明出处: http://blog.csdn.net/xmxkf/article/details/53420889 本文出自:[openXu的博客] 目录: 1分析 2定义控件布局 3定义CustomWeekView 4重写onMeasure 5点击后执行动画 7重置预备控件 源码下载 ??最近收到一个自定义控件的需求,需要做一个日期选择控件,实现图如下: ???? ??一次展示一个星期的5天,中间放大的为当前选中的:如果点击了其中一个日期,比如星期五,那么整体向左滑动,并将星期五慢慢放大

ExtJS6.0扩展日期选择控件为也可以选择时间

PS:ExtJS自带的日期选择控件只能够选择日期,但是现在的需求需要精确到秒,所以在网上搜索了一些例子(大部分是4.0的)作为参考,然后改出了6.0可用的一个日期时间选择控件. 1.找到extjs6.0源代码中Picker文件路径下的Date.js脚本(路径:ext-6.0.0-gpl\ext-6.0.0\classic\classic\src\picker),拷贝一份出来命名为DateTimePicker.js 2.修改命名空间(把白色底的改成黑色底的命名空间以及别名,你也可以修改为自己存放该