Make it easier to customise the look of the date picker using CssClass property.

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 @@
     <exclude name="demos/blog/protected/Data/Blog.db" />
     <include name="demos/**/*"/>
   </fileset>
+

+  <fileset dir="." id="test-tools">

+    <include name="tests/test_tools/**/*"/>

+  </fileset>

 
   <!--
       Writable files and directories
@@ -105,11 +109,11 @@
               phing   &lt;target name&gt;
 
     where &lt;target name&gt; can be one of the following:
-    
+
     For all PRADO developers:
     - test    : run unit tests (results are under /build/test-reports);
     - js      : generate Javascript distribution files;
-    
+
     For PRADO release manager:
     - dist    : create release files;
     - build   : prepare a directory for distribution;
@@ -125,24 +129,25 @@
     <echo>Building pradolite.php...</echo>
     <delete file="framework/pradolite.php"/>
     <exec command="${php} build.php" dir="buildscripts/phpbuilder" passthru="true"/>
-    
+
     <echo>Copying files to build directory...</echo>
     <copy todir="${build.src.dir}">
       <fileset refid="demos"/>
       <fileset refid="docs"/>
       <fileset refid="framework"/>
-      <fileset refid="misc"/>
+      <fileset refid="misc"/>

+	  <fileset refid="test-tools" />
     </copy>
-    
+
     <copy file="buildscripts/classtree/DWExtensionReadme.txt" tofile="${build.src.dir}/editors/Dreamweaver/readme.txt" />
     <copy file="framework/pradolite.php" tofile="${build.src.dir}/framework/pradolite.php" />
     <copy file="framework/prado-cli.php" tofile="${build.src.dir}/framework/prado-cli.php" />
-    
+
     <echo>Changing file permissions...</echo>
     <chmod mode="0777">
       <fileset refid="writables" />
     </chmod>
-    
+
     <echo>Building quickstart demo search indices...</echo>
     <prado-quickstart-index todir="${build.src.dir}/demos/quickstart/protected/index/quickstart" />
   </target>
@@ -183,7 +188,7 @@
         <exec command="${hhc} ${build.doc.dir}/manual/CHMdefaultConverter/phpdoc.hhp" />
       </then>
     </if>
-    
+
     <echo>Indexing API manuals...</echo>
     <prado-api-index docdir="${build.doc.dir}/manual/HTMLSmartyConverter" todir="${build.doc.dir}/manual/HTMLSmartyConverter" />
     <copy file="buildscripts/index/search.php" todir="${build.doc.dir}/manual/HTMLSmartyConverter" />
@@ -204,7 +209,7 @@
         <move file="${build.doc.dir}/manual/CHMdefaultConverter/documentation.chm" tofile="${build.src.dir}/docs/manual.chm" />
       </then>
     </if>
-    
+
     <echo>Generating compressed distribution files...</echo>
     <if>
       <equals arg1="${prado.winbuild}" arg2="false"/>
@@ -216,11 +221,11 @@
     <exec command="zip ${pkgname}.zip -r ${pkgname}" dir="${build.base.dir}" />
     <move file="${build.base.dir}/${pkgname}.zip" todir="${build.dist.dir}" />
 
-	<echo>Generating files for pradosoft.com...</echo>    
+	<echo>Generating files for pradosoft.com...</echo>
     <echo>Compiling class docs...</echo>
     <exec command="${php} build.php" dir="buildscripts/classtree" passthru="true"/>
     <move file="buildscripts/classtree/classes.data" todir="${build.web.dir}/protected/Data" />
-    
+
     <echo>Moving HTML docs to Web folder...</echo>
     <mkdir dir="${build.web.dir}" />
     <move todir="${build.web.dir}/docs/manual">
@@ -228,26 +233,26 @@
         <include name="**/**" />
       </fileset>
     </move>
-    
+
     <echo>
-    
+
 
                    Distribution Not Completed Yet!!!
-                   
+
 The following steps need to be manually performed in order to complete
 the PRADO distribution:
 
 1. Package DreamWeaver extension by running DW extension manager with
    buildscripts/classtree/PRADO.mxi and saving the generated file as
    "${build.src.dir}/editors/Dreamweaver/PRADO.mxp"
-   
-2. If building on Linux, the CHM doc file needs to be generated by compiling 
+
+2. If building on Linux, the CHM doc file needs to be generated by compiling
    "${build.doc.dir}/manual/CHMdefaultConverter/phpdoc.hhp"
-   and saving the generated file as 
+   and saving the generated file as
    "${build.src.dir}/docs/manual.chm"
 
 3. Use winzip (on Windows) and gzip (on Linux) to generate the compressed
-   release files of the direcotry 
+   release files of the direcotry
    "${build.src.dir}".
 
     </echo>
@@ -272,7 +277,7 @@ the PRADO distribution:
     <phpunit2report infile="${build.test.dir}/unit-tests.xml" format="frames" styledir="buildscripts/phing/style" todir="${build.test.dir}"/>
   </target>
 
-  <target name="snapshot" depends="rebuild">  
+  <target name="snapshot" depends="rebuild">
     <echo>Generating compressed distribution files...</echo>
     <if>
       <equals arg1="${prado.winbuild}" arg2="false"/>
@@ -285,7 +290,7 @@ the PRADO distribution:
     <move file="${build.base.dir}/${pkgname}.zip" tofile="${build.snapshot.dir}/prado-latest.zip" />
     <copy file="${build.src.dir}/HISTORY" tofile="${build.snapshot.dir}/changelog-latest.txt" />
   </target>
-  
+
 <!--
   <taskdef name="phplint" classname="PhpLintTask" classpath="buildscripts/phing/tasks"/>
   <taskdef name="xmllint" classname="XmlLintTask" classpath="buildscripts/phing/tasks"/>
@@ -403,7 +408,7 @@ the PRADO distribution:
 	<include name="${prado.lite}"/>
       </fileset>
     </copy>
-    
+
     <echo>Creating package.xml...</echo>
     <pear-package dir="${build.pear.dir}" destFile="${build.base.dir}/pear/package.xml" version="${version}" state="${pear.state}" notes="${notes}">
       <fileset refid="framework"/>
@@ -427,9 +432,9 @@ the PRADO distribution:
   <target name="install" description="Install PEAR package locally">
     <exec command="sudo pear install ${dist.pearfile}" dir="." passthru="true"/>
   </target>
-  
+
   <target name="uninstall" description="Uninstall PEAR package locally">
-    <exec command="sudo pear uninstall pear.pradosoft.com/prado3" dir="." passthru="true"/>   
+    <exec command="sudo pear uninstall pear.pradosoft.com/prado3" dir="." passthru="true"/>
   </target>
--->  
+-->
 </project>
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;i<this.MonthNames.length;i++){var opt=document.createElement("option");opt.innerHTML=this.MonthNames[i];opt.value=i;if(i==this.selectedDate.getMonth()){opt.selected=true;}
 this._monthSelect.appendChild(opt);}
@@ -99,7 +99,7 @@ Event.observe(document,"keydown",this.documentKeyDownEvent);this.showing=true;}}
 return Date.SimpleParse($F(this.control),this.Format);else
 return Prado.WebUI.TDatePicker.getDropDownDate(this.control);},hideOnClick:function(ev)
 {if(!this.showing)return;var el=Event.element(ev);var within=false;do
-{within=within||el.className==this.ClassName;within=within||el==this.trigger;within=within||el==this.control;if(within)break;el=el.parentNode;}
+{within=within||(el.className&&Element.hasClassName(el,"TDatePicker_"+this.CalendarStyle));within=within||el==this.trigger;within=within||el==this.control;if(within)break;el=el.parentNode;}
 while(el);if(!within)this.hide();},hide:function()
 {if(this.showing)
 {this._calDiv.style.display="none";if(this.iePopUp)
diff --git a/framework/Web/Javascripts/js/debug/datepicker.js b/framework/Web/Javascripts/js/debug/datepicker.js
index 0e21b2da..81daeddf 100644
--- a/framework/Web/Javascripts/js/debug/datepicker.js
+++ b/framework/Web/Javascripts/js/debug/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/UI/WebControls/TDatePicker.php b/framework/Web/UI/WebControls/TDatePicker.php
index 86d119ac..b435324d 100644
--- a/framework/Web/UI/WebControls/TDatePicker.php
+++ b/framework/Web/UI/WebControls/TDatePicker.php
@@ -451,6 +451,7 @@ class TDatePicker extends TTextBox
 		$options['FirstDayOfWeek'] = $this->getFirstDayOfWeek();

 		if(($cssClass=$this->getCssClass())!=='')

 			$options['ClassName'] = $cssClass;

+		$options['CalendarStyle'] = $this->getCalendarStyle();

 		$options['FromYear'] = $this->getFromYear();

 		$options['UpToYear'] = $this->getUpToYear();

 		if($this->getMode()!==TDatePickerMode::Basic)