上一篇中用到的_MonthPicker

       这个可视化编辑器真是气人，经常将我编辑好的代码弄乱，上传文件也有些问题。

      这个选择月的控件是仿照dojo的_Calendar做的，也是一个字，“差”，是用来拍砖的靶子。

if(!dojo._hasResource["bad.form._MonthPicker"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["bad.form._MonthPicker"] = true;
dojo.provide("bad.form._MonthPicker");

dojo.require("dojo.cldr.supplemental");
dojo.require("dojo.date.locale");

dojo.require("dijit._Widget");
dojo.require("dijit._Templated");

dojo.declare(
	"bad.form._MonthPicker",
	[dijit._Widget, dijit._Templated],
	{		
		templateString: "<table cellspacing=\"0\" cellpadding=\"0\" class=\"dijitCalendarContainer\">\n\t<thead>\n\t\t<tr class=\"dijitReset dijitCalendarMonthContainer\" valign=\"top\">\n\t\t\t<th class='dijitReset' dojoAttachPoint=\"decrementYear\">\n\t\t\t\t<span class=\"dijitInline dijitCalendarIncrementControl dijitCalendarDecrease\"><span dojoAttachPoint=\"decreaseArrowNode\" class=\"dijitA11ySideArrow dijitCalendarIncrementControl dijitCalendarDecreaseInner\">-</span></span>\n\t\t\t</th>\n\t\t\t<th class='dijitReset'>\n\t\t\t\t<div dojoAttachPoint=\"yearLabelSpacer\" class=\"dijitCalendarMonthLabelSpacer\"></div>\n\t\t\t\t<div dojoAttachPoint=\"yearLabelNode\" class=\"dijitCalendarMonth\"></div>\n\t\t\t</th>\n\t\t\t<th class='dijitReset' dojoAttachPoint=\"incrementYear\">\n\t\t\t\t<div class=\"dijitInline dijitCalendarIncrementControl dijitCalendarIncrease\"><span dojoAttachPoint=\"increaseArrowNode\" class=\"dijitA11ySideArrow dijitCalendarIncrementControl dijitCalendarIncreaseInner\">+</span></div>\n\t\t\t</th>\n\t\t</tr></thead>\n\t<tbody dojoAttachEvent=\"onclick: _onMonthClick\" class=\"dijitReset dijitMonthPickerContainer\">\n\t\t<tr class=\"dijitReset dijitCalendarSeasonTemplate\">\n\t\t\t<td class=\"dijitReset dijitCalendarMonthTemplate\"><span class=\"dijitPickerMonthLabel\"></span></td>\n\t\t</tr>\n\t</tbody>\n\t</table>\t\n",	
		
		/**@param:{Date}_MonthPicker的值*/
		value: "",
		
		/**@param: 用来显示的连接符*/
		flag: "",
		
		/**@param: 用来显示的值*/
		displayValue: new Date(),	
		
		
		/** @attr: 显示宽度，默认为wide */
		monthWidth: "wide",
		
		/**@method: 设置用来显示的连接符*/
		setFlag: function(flag)
		{
			this.flag=flag;
		},
		
		/**@method: 设置显示值
		*@param: value需要显示的值
		*/
		setValue: function(/*Date*/ value)
		{
			if(!this.value || dojo.date.compare(value, this.value))
			{				
				value=new Date(value).setDate(10);								
				this.displayYear =new Date(value);				
				this.value=new Date(value);
				//this.value.setHours(0,0,0,0);		
				this.onChange(this.value);
				this._populateGrid();
			}
		},
		
		/** @method: 将日期制转换为显示值
		*@param: 待转换的值
		*@return: 用来显示的值
		*/
		getDisplayValue: function(value)
		{
			var showValue="";
			var yearValue=value.getFullYear();
			var monthValue=value.getMonth();
			showValue=yearValue+this.flag+monthValue;	
			return showValue;
		},		
		
		
		/**@method: 给节点文本赋值
		*@param:{Object}node,{String}text
		*/
		_setText: function(node,text)   
		{			
			while(node.firstChild)
			{
				node.removeChild(node.firstChild);
			}		
			node.appendChild(document.createTextNode(text));
		},

		/** @method: 弹出窗口*/
		_populateGrid: function()
		{
			var year = this.displayYear.getFullYear();	
			
			var today = new Date(new Date(new Date().setDate(10)).setHours(0,0,0,0));
			//为了防止格式化时被补零，特设一个不会被补零的值
			;
			/*月份0表示1月,11表示12月*/
			var monthNum=-1;
				//得到国际化过的月份值
			var monthNames = dojo.date.locale.getNames('months', 'wide', 'standAlone', this.lang);				
			var selected = this.value.setDate(10);
		
			
			/*查找月份节点，进行赋值*/	
			dojo.query(".dijitCalendarMonthTemplate", this.domNode).forEach(function(label, i){						
				var clazz="";	
				monthNum++;		
				var isAddClass=false;
				var date = new Date(year,monthNum,10);										
				//比较是不是现在的月份				
				if(dojo.date.compare(date,today)==0)
				{									
					clazz = "dijitMonthPickCurrentMonth " + clazz;				
					isAddClass=true;
				}
				//比较是不是选择的月份				
				if(dojo.date.compare(date,selected)==0){					
					clazz = "dijitCalendarSelectedMonth " + clazz;					
					isAddClass=true;
				}								
				if(!isAddClass)
				{
					if(dojo.hasClass(label,"dijitMonthPickCurrentMonth"))
					{
						dojo.removeClass(label,"dijitMonthPickCurrentMonth");
					}
					if(dojo.hasClass(label,"dijitCalendarSelectedMonth"))
					{
						dojo.removeClass(label,"dijitCalendarSelectedMonth");
					}
				}
				label.className =  clazz + " dijitCalendarMonthTemplate";			
				label.dijitDateValue = date.valueOf();
				//this._setText(label, monthNames[i]);	
				var template = dojo.query(".dijitPickerMonthLabel", label)[0];
				this._setText(template, monthNames[i]);
			}, this);
			
			/*对年赋值*/					
			var y = year;
			this._setText(this["yearLabelNode"],year);
			var _this = this;
			var typematic = function(nodeProp, dateProp, adj){
				dijit.typematic.addMouseListener(_this[nodeProp], _this, function(count)
				{
					if(count >= 0){	_this._adjustDisplay(dateProp, adj); }
				}, 0.8, 500);
			};
			typematic("incrementYear", "year", 1);
			typematic("decrementYear", "year", -1);
		},
		
		/**@method: 渲染*/
		postCreate: function()
		{
			bad.form._MonthPicker.superclass.postCreate.apply(this);
			var cloneClass = dojo.hitch(this, 
				function(clazz, n)
				{
					var template = dojo.query(clazz, this.domNode)[0];
		 			for(var i=0; i<n; i++)
		 			{
						template.parentNode.appendChild(template.cloneNode(true));
					}
				}
			);
			
			// 克隆3次，让每行变为3列			
			cloneClass(".dijitCalendarMonthTemplate",2);

			// 克隆3次，显示为4季
			cloneClass(".dijitCalendarSeasonTemplate",3 );			
			this.setValue(new Date().setDate(10));				
		},

		/**@method: 修改显示的年份
		*@param: part:变化的部分( 年)  amount: 变化的值
		*/		
		_adjustDisplay: function(/*String*/part, /*int*/amount){	
			this.displayYear = dojo.date.add(this.displayYear, part, amount);			
			this._populateGrid();
		},
		
		/**@event 响应点击月份事件*/
		_onMonthClick: function(/*Event*/evt){			  
			var node = evt.target;
			dojo.stopEvent(evt);
			
			while(!node.dijitDateValue){
				node = node.parentNode;				
			}			
			this.setValue(node.dijitDateValue);	
			this.onValueSelected(this.value);			
		},		
		
		/** @event: 点击弹出窗口触发
		 *  @param: {Date}date
		*/
		onValueSelected: function(/*Date*/date){			
		},
		
		/** @event: 值改变触发事件
		*@param: {Date}date
		*/
		onChange: function(/*Date*/date){
			//console.log("Date change , date is "+date.getFullYear()+"\u5E74"+(date.getMonth()+1)+"\u6708"+ "now" );
		},
		
		/** @method: 是否是个有效的日期
		 *  @param: {Date}dateObject,{String}locale
		 *  @return: false 默认全是有效日期
		 */
		isDisabledDate: function(/*Date*/dateObject, /*String?*/locale){			
			return false; 
		}
	}
);
}