ExtJS5 - 实现带周数的日期选择控件

Ext默认提供了日期选择控件Ext.date.Picker和日期输入框Ext.form.field.Date这两个类来完成日期选择等相关操作，并且通过单体类Ext.Date提供一些常用的日期时间处理方法。

但是在实际的业务场景中，我们常常期望日期选择控件能够显示每周的周数，以方便用户对日期进行筛选。下面的代码示例就通过对Ext.date.Picker和Ext.form.field.Date的扩展来实现带周数的日期选择控件：

Ext.onReady(function() {
	Ext.define("KwDatePicker", {
		extend: "Ext.picker.Date",
		alias: "widget.kwdatepicker",
		width: 242,
		numWeeks: 6, //每屏要显示的周数
		
		renderTpl: [
	        '
',
	            '
',
	                '
',
	                '
{%this.renderMonthBtn(values, out)%}
',
	                '
',
	            '
',
	            '',
	                '',
	                	'',
	                    '',
	                        '',
	                    '',
	                '',
	                '',
	                    '',
	                        '{#:this.isEndOfWeek}',
	                        '{#:this.isBeginOfWeek}',
	                        '',
	                    '',
	                '',
	            '
',
                            '
KW
',
                        '
',
	                            '
{.:this.firstInitial}
',
	                        '
',
	                            '
',
	                        '
',
	            '',
	                '
{%this.renderTodayBtn(values, out)%}
',
	            '',
	        '
',
	        {
	            firstInitial: function(value) {
	                return Ext.picker.Date.prototype.getDayInitial(value);
	            },
	            isEndOfWeek: function(value) {
	                // convert from 1 based index to 0 based
	                // by decrementing value once.
	                value--;
	                var end = value % 7 === 0 && value !== 0;
	                return end ? '' : '';
	            },
	            isBeginOfWeek: function(value){   
                    var end = (value === 1 || (value-1)%7 === 0);  
                    return end ? '
' : '';  
  
                },  
	            renderTodayBtn: function(values, out) {
	                Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
	            },
	            renderMonthBtn: function(values, out) {
	                Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
	            }
	        }
	    ],
	    fullUpdate: function(date) {
	    	var me = this;
	    	me.callParent(arguments);
	    	
	    	var weekTextNodes = me.weekTextNodes; 
            var firstDateOfMonth = Ext.Date.getFirstDateOfMonth(date); //获取当月第一天日期
            //var firstDayOfMonth = Ext.Date.getFirstDayOfMonth(date); //获取当月第一天星期 0-6
            //var firstWeekOfMonth = Ext.Date.getWeekOfYear(firstDateOfMonth); //当月第一天的周数
            
            for(j=0;j

然后可以通过添加一行简单的样式进行美化：

.x-datepicker-week {padding:4px 0;text-align:center;color:#006699;background-color:#fafafa;}

效果如下：

Ext采用ISO-8601的日期时间标准，其周数算法规则如下：

1、每周的第一天为星期一；

2、一年的第一周为该年中第一个满四天的周；