From 2606b91b9f25799fc652aa1eba9dd6bcc32cfcbd Mon Sep 17 00:00:00 2001 From: wei <> Date: Thu, 14 Sep 2006 00:47:58 +0000 Subject: Make it easier to customise the look of the date picker using CssClass property. --- framework/Web/Javascripts/datepicker/datepicker.js | 8 ++++--- framework/Web/Javascripts/datepicker/default.css | 26 +++++++++++----------- .../Web/Javascripts/js/compressed/datepicker.js | 6 ++--- framework/Web/Javascripts/js/debug/datepicker.js | 8 ++++--- framework/Web/UI/WebControls/TDatePicker.php | 1 + 5 files changed, 27 insertions(+), 22 deletions(-) (limited to 'framework') diff --git a/framework/Web/Javascripts/datepicker/datepicker.js b/framework/Web/Javascripts/datepicker/datepicker.js index 5fff5f0f..2f1e8261 100644 --- a/framework/Web/Javascripts/datepicker/datepicker.js +++ b/framework/Web/Javascripts/datepicker/datepicker.js @@ -53,7 +53,9 @@ Prado.WebUI.TDatePicker.prototype = FirstDayOfWeek : 1, // 0 for sunday - ClassName : "TDatePicker", + ClassName : "", + + CalendarStyle : "default", FromYear : 2000, UpToYear: 2015, @@ -97,7 +99,7 @@ Prado.WebUI.TDatePicker.prototype = // Create the top-level div element this._calDiv = document.createElement("div"); - this._calDiv.className = this.ClassName; + this._calDiv.className = "TDatePicker_"+this.CalendarStyle+" "+this.ClassName; this._calDiv.style.display = "none"; this._calDiv.style.position = "absolute" @@ -581,7 +583,7 @@ Prado.WebUI.TDatePicker.prototype = var within = false; do { - within = within || el.className == this.ClassName; + within = within || (el.className && Element.hasClassName(el, "TDatePicker_"+this.CalendarStyle)); within = within || el == this.trigger; within = within || el == this.control; if(within) break; diff --git a/framework/Web/Javascripts/datepicker/default.css b/framework/Web/Javascripts/datepicker/default.css index 7e920f1b..9532dad0 100644 --- a/framework/Web/Javascripts/datepicker/default.css +++ b/framework/Web/Javascripts/datepicker/default.css @@ -1,4 +1,4 @@ -.TDatePicker +.TDatePicker_default { border: 1px solid #919EA9; background-color: White; @@ -27,69 +27,69 @@ border-color: #ddd; } -.TDatePicker select +.TDatePicker_default select { font-size: 11px; } -.TDatePicker input.button +.TDatePicker_default input.button { font-size: 11px; width: 32px; } -.TDatePicker .date +.TDatePicker_default .date { padding: 4px 0; border: 1px solid white; text-align: center; } -.TDatePicker .hover +.TDatePicker_default .hover { border: 1px solid blue; } -.TDatePicker .selected +.TDatePicker_default .selected { background-color: blue; border: 1px solid blue; color: white; } -.TDatePicker .today +.TDatePicker_default .today { font-weight: bold; } -.TDatePicker td.empty +.TDatePicker_default td.empty { border: 1px solid white; cursor: default; height: 22px; } -.TDatePicker th +.TDatePicker_default th { width: 28px; } -.TDatePicker .calendarBody +.TDatePicker_default .calendarBody { text-align: center; width: 210px; margin: 3px 6px; } -.TDatePicker .grid +.TDatePicker_default .grid { border-spacing: 0px; } -.TDatePicker .calendarFooter +.TDatePicker_default .calendarFooter { margin: 2px; border-top: 1px solid #919EA9; padding-top: 2px; } -.TDatePicker .todayButton +.TDatePicker_default .todayButton { font-size: 11px; margin: 4px; diff --git a/framework/Web/Javascripts/js/compressed/datepicker.js b/framework/Web/Javascripts/js/compressed/datepicker.js index f47e557c..72b7591a 100644 --- a/framework/Web/Javascripts/js/compressed/datepicker.js +++ b/framework/Web/Javascripts/js/compressed/datepicker.js @@ -3,14 +3,14 @@ Prado.WebUI.TDatePicker=Class.create();Object.extend(Prado.WebUI.TDatePicker,{ge {var now=new Date();var year=now.getFullYear();var month=now.getMonth();var day=1;var month_list=this.getMonthListControl(control);var day_list=this.getDayListControl(control);var year_list=this.getYearListControl(control);var day=day_list?$F(day_list):1;var month=month_list?$F(month_list):now.getMonth();var year=year_list?$F(year_list):now.getFullYear();return new Date(year,month,day,0,0,0);},getYearListControl:function(control) {return $(control.id+"_year");},getMonthListControl:function(control) {return $(control.id+"_month");},getDayListControl:function(control) -{return $(control.id+"_day");}});Prado.WebUI.TDatePicker.prototype={MonthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],AbbreviatedMonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],ShortWeekDayNames:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],Format:"yyyy-MM-dd",FirstDayOfWeek:1,ClassName:"TDatePicker",FromYear:2000,UpToYear:2015,initialize:function(options) +{return $(control.id+"_day");}});Prado.WebUI.TDatePicker.prototype={MonthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],AbbreviatedMonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],ShortWeekDayNames:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],Format:"yyyy-MM-dd",FirstDayOfWeek:1,ClassName:"",CalendarStyle:"default",FromYear:2000,UpToYear:2015,initialize:function(options) {this.options=options||[];this.control=$(options.ID);this.dateSlot=new Array(42);this.weekSlot=new Array(6);this.minimalDaysInFirstWeek=4;this.selectedDate=this.newDate();if(this.options.Trigger) {this.trigger=$(this.options.Trigger);var triggerEvent=this.options.TriggerEvent||"click";} else {this.trigger=this.control;var triggerEvent=this.options.TriggerEvent||"focus";} Object.extend(this,options);Event.observe(this.trigger,triggerEvent,this.show.bindEvent(this));},create:function() {if(typeof(this._calDiv)!="undefined") -return;var div;var table;var tbody;var tr;var td;this._calDiv=document.createElement("div");this._calDiv.className=this.ClassName;this._calDiv.style.display="none";this._calDiv.style.position="absolute" +return;var div;var table;var tbody;var tr;var td;this._calDiv=document.createElement("div");this._calDiv.className="TDatePicker_"+this.CalendarStyle+" "+this.ClassName;this._calDiv.style.display="none";this._calDiv.style.position="absolute" div=document.createElement("div");div.className="calendarHeader";this._calDiv.appendChild(div);table=document.createElement("table");table.style.cellSpacing=0;div.appendChild(table);tbody=document.createElement("tbody");table.appendChild(tbody);tr=document.createElement("tr");tbody.appendChild(tr);td=document.createElement("td");var previousMonth=document.createElement("input");previousMonth.className="prevMonthButton button";previousMonth.type="button" previousMonth.value="<<";td.appendChild(previousMonth);tr.appendChild(td);td=document.createElement("td");tr.appendChild(td);this._monthSelect=document.createElement("select");this._monthSelect.className="months";for(var i=0;igetFirstDayOfWeek(); if(($cssClass=$this->getCssClass())!=='') $options['ClassName'] = $cssClass; + $options['CalendarStyle'] = $this->getCalendarStyle(); $options['FromYear'] = $this->getFromYear(); $options['UpToYear'] = $this->getUpToYear(); if($this->getMode()!==TDatePickerMode::Basic) -- cgit v1.2.3