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 + 年份后两位 + 两位周号）。

/*
 * 返回格式如 W1334（对应 2013/08/20）
 * 规则：
 * 1. 如果是星期天，周号加1（因为 Ext.getWeekOfYear 使用 ISO-8601，周一为一周开始，而 JS Date 周日为一周开始）
 * 2. 如果周号大于52，则年份加1，周号减52
 * 3. 如果是12月且周号小于2，则年份加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”以及“年末跨年”的处理逻辑，其他细节可根据具体业务场景灵活调整。