Ext JS 4实战二：带星期的日期选择控件实现

首先回顾一下：如果你尚未阅读此前关于 JavaScript 日期时间基础以及 Ext JS 4 日期控件扩展的两篇实战文章，建议先进行了解。简单来说，JavaScript 的 Date 对象是处理时间的核心工具，但它并未直接提供“星期”的序号。要在前端通过 JS 计算出某一天属于当年的第几周，需要借助一定的算法。当然，许多库（例如 jQuery 的扩展、Ext JS 等）已经封装了这类方法。Ext JS 提供了 Ext.Date.getWeekOfYear(date) 方法，使用起来较为便捷。

问题

那么，使用 Ext JS 是否真的能完美解决星期问题？

本系列第一篇已提到，Ext 的 datepicker 默认不显示星期，需要自行扩展。但在扩展过程中，会遇到一个根本性矛盾：JavaScript 的 Date 对象规定每周从星期天开始（0 = 星期天），而 Ext JS 的 getWeekOfYear 方法却遵循 ISO-8601 标准，每周从星期一开始。更令人困扰的是，Ext JS 内部混用了不同的日期标准——部分方法遵循 ISO，部分则不然。

具体而言，Ext.Date.getWeekOfYear 返回的是 1~53 的数字。但问题在于：Ext 的日期控件默认按星期天到星期六排列（S M T W T F S），而计算周号时又按星期一开始。结果出现两个明显的坑：

• 星期天的周号少 1。例如 2013 年 8 月 18 日是星期天，本该是第 34 周，但 getWeekOfYear 却将其算作上一周的结尾——33 周。
• 跨年时的周号归属混乱。由于日期控件默认显示 42 天（6 周），年底最后几天可能被算作下一年第 1 周，或者当年第 53 周，逻辑不统一。

date = new Date("2013/08/18");
var week = Ext.Date.getWeekOfYear(date);
alert("week="+week);

解决方案

既然标准存在冲突，就自行结合 JavaScript 的 Date 对象和 Ext JS 的 Ext.Date，封装一个获取星期字符串的函数。核心规则仅三条：

1. 每周以星期天为第一天，与控件显示保持一致。
2. 每年的周数范围定义为 1~52，若计算超过 52 周，则归入下一年的第 1 周（例如 2013 年 12 月 29 日本为第 53 周，直接记为 2014 年第 1 周）。
3. 返回形如 “W1334” 的格式（W + 年份后两位 + 两位周号）。

/*
 * return as W1334()2013/08/20
 * 1. if sunday==> week = week+1
 *    getWeekOfYear(Ext use ISO-8601,week begin monday)
 *    js Date(week begin sunday)
 * 2. if week > 52==> year = year +1; week = week - 52;
 * 3. if month ==11(12 month) and week <2 ==> year = year +1;
 */
function getWeekStrOfDate(date) {
    var weekStr = null;
    if (date != null) {
        weekStr = "W";
        var dateYear = date.getFullYear();
        var dateWeek = Ext.Date.getWeekOfYear(date);
        var firstDayOfMonth = Ext.Date.getFirstDayOfMonth(date);
        var day = date.getDate();
        var month = date.getMonth();
        // weekday 0-6
        var weekday = date.getDay();
        if (weekday === 0) {
            dateWeek++;
        }

        // week > 52 => year +1
        if (month == 11) {
            if (dateWeek > 52) {
                dateYear += 1;
                dateWeek -= 52;
            } else if (dateWeek < 2) {
                dateYear += 1;
            }
        }
        var yearStr = dateYear.toString();
        yearStr = yearStr.substring(2, 4);
        var dateWeekStr = dateWeek.toString();
        if (dateWeekStr.length < 2) {
            dateWeekStr = "0" + dateWeekStr;
        }
        weekStr += yearStr;
        weekStr += dateWeekStr;
    }
    return weekStr;
}

这样一来，日期控件上显示的星期与实际计算出的周号就能对齐。关键在于理解“星期天 +1”以及“年末跨年”的处理逻辑，其他细节可根据具体业务场景微调。