这个可视化编辑器真是气人,经常将我编辑好的代码弄乱,上传文件也有些问题。
这个选择月的控件是仿照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;
}
}
);
}