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.
---
HISTORY | 1 +
build.xml | 53 ++++++++++++----------
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 +
7 files changed, 57 insertions(+), 46 deletions(-)
diff --git a/HISTORY b/HISTORY
index c4c89ce4..8ec9eacc 100644
--- a/HISTORY
+++ b/HISTORY
@@ -1,6 +1,7 @@
Version 3.0.5 October 8, 2006
===============================
CHG: Ticket#358 - TFileUpload::saveAs() now returns false instead of exception when error (Qiang)
+ENH: Easier to customize the TDatePicker using CssClass (Wei)
ENH: Ticket#361 - Introduced include template tag that supports including external templates (Qiang)
ENH: Ticket#366 - white spaces are now allowed around attribute names in template (Qiang)
NEW: TLiteralColumn (Qiang)
diff --git a/build.xml b/build.xml
index 4f177832..0c2b596f 100644
--- a/build.xml
+++ b/build.xml
@@ -85,6 +85,10 @@
+
+
+
+
+-->
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