日期选择组件增加清除按钮

o2web/source/o2_core/o2/widget/$Calendar/xform/container.html

@@ -8,5 +8,6 @@
 		<div class="MWF_calendar_content_date contentDate">
 		</div>
 	</div>
+	<div class="MWF_calendar_button_area"></div>
 	<div class="MWF_calendar_bottom dateBottom"></div>
 </div>

o2web/source/o2_core/o2/widget/$Calendar/xform/css.wcss

@@ -225,5 +225,17 @@
 		"width": "50px",
 		"padding": "5px",
 		"border": "1px solid #999"
+	},
+	"buttonArea" : {
+
+	},
+	"calendarMonthActionButton" : {
+		"width" : "100%",
+		"text-align" : "center",
+		"color" : "#000",
+		"font-size" : "14px",
+		"cursor" : "pointer",
+		"line-height" : "24px",
+		"height" : "24px"
 	}
 }

o2web/source/o2_core/o2/widget/Calendar.js

@@ -246,8 +246,30 @@ o2.widget.Calendar = o2.Calendar = new Class({
 
 		this.showDay(year, month);
 
+		this.showMonthYearButton();
+
 		this.fireEvent("changeViewToDay");
 	},
+	hideMonthYearButton : function(){
+		if(this.clearButton_month){
+			this.clearButton_month.hide();
+		}
+	},
+	showMonthYearButton : function(){
+		if( this.buttonArea && !this.clearButton_month ){
+			this.container.setStyle("height","auto");
+			this.clearButton_month = new Element("div", {"text": "清除"}).inject(this.buttonArea);
+			this.clearButton_month.addEvent("click", function(){
+				this.node.set("value", "");
+				this.fireEvent("clear");
+				this.hide();
+			}.bind(this));
+			this.clearButton_month.setStyles(this.css.calendarMonthActionButton);
+		}
+		if(this.clearButton_month){
+			this.clearButton_month.show();
+		}
+	},
 	getNext: function(){
 		switch (this.currentView) {
 			case "time" :
@@ -524,6 +546,8 @@ o2.widget.Calendar = o2.Calendar = new Class({
 		this._setYearTitle(null, beginYear, endYear, thisYear);
 		this._setYearDate(null, beginYear, endYear, thisYear);
 
+		this.showMonthYearButton();
+
 		//	if (!this.move){
 		//		this.move = true;
 		//		this.containerDrag = new Drag.Move(this.container);
@@ -560,6 +584,8 @@ o2.widget.Calendar = o2.Calendar = new Class({
 		this._setMonthTitle(null, thisYear, thisMonth);
 		this._setMonthDate(null, thisYear, thisMonth);
 
+		this.showMonthYearButton();
+
 		//	if (!this.move){
 		//		this.move = true;
 		//		this.containerDrag = new Drag.Move(this.container);
@@ -697,6 +723,8 @@ o2.widget.Calendar = o2.Calendar = new Class({
 		var thisDate = date || this.options.baseDate;
 
 		this.showTime(thisDate);
+
+		this.hideMonthYearButton();
 	},
 
 	showTime: function(date){
@@ -1086,6 +1114,7 @@ o2.widget.Calendar = o2.Calendar = new Class({
 		this.contentNode = div.getElement(".MWF_calendar_content");
 		this.contentDateNode = div.getElement(".MWF_calendar_content_date");
 		this.contentTimeNode = div.getElement(".MWF_calendar_content_time");
+		this.buttonArea = div.getElement(".MWF_calendar_button_area");
 		this.bottomNode = div.getElement(".MWF_calendar_bottom");
 
 		div.setStyles(this.css.container);
@@ -1095,6 +1124,7 @@ o2.widget.Calendar = o2.Calendar = new Class({
 		this.currentTextNode.setStyles(this.css.dateCurrentText);
 		this.nextNode.setStyles(this.css.dateNext);
 		this.contentNode.setStyles(this.css.calendarContent);
+		if(this.buttonArea)this.buttonArea.setStyles(this.css.buttonArea);
 		this.bottomNode.setStyles(this.css.dateBottom);
 
 		return div;