From 66c5465f3d55ea1ce605e2c636adf87ae14b4d95 Mon Sep 17 00:00:00 2001
From: wei <>
Date: Fri, 20 Jan 2006 00:54:18 +0000
Subject:

---
 .gitattributes                                   |   1 +
 framework/Web/Javascripts/extended/base.js       |   3 +-
 framework/Web/Javascripts/extended/util.js       |   2 +-
 framework/Web/Javascripts/extra/logger.js        |   5 +-
 framework/Web/Javascripts/js/datepicker.js       | 492 +++++++++++------------
 framework/Web/Javascripts/js/prado.js            |  94 +++--
 framework/Web/Javascripts/prado/datepicker.js    | 460 +++++++++------------
 framework/Web/Javascripts/prado/prado.js         |  45 ++-
 framework/Web/Javascripts/prado/test.html        |  96 ++---
 framework/Web/UI/TClientScriptManager.php        |   1 +
 framework/Web/UI/WebControls/TDatePicker.php     | 244 +++++++++++
 tests/FunctionalTests/protected/pages/Layout.tpl |   2 +-
 12 files changed, 826 insertions(+), 619 deletions(-)
 create mode 100644 framework/Web/UI/WebControls/TDatePicker.php

diff --git a/.gitattributes b/.gitattributes
index 2fd8cf6d..7230ab10 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -559,6 +559,7 @@ framework/Web/UI/WebControls/TDataGridColumn.php -text
 framework/Web/UI/WebControls/TDataList.php -text
 framework/Web/UI/WebControls/TDataSourceControl.php -text
 framework/Web/UI/WebControls/TDataSourceView.php -text
+framework/Web/UI/WebControls/TDatePicker.php -text
 framework/Web/UI/WebControls/TDropDownList.php -text
 framework/Web/UI/WebControls/TEditCommandColumn.php -text
 framework/Web/UI/WebControls/TEmailAddressValidator.php -text
diff --git a/framework/Web/Javascripts/extended/base.js b/framework/Web/Javascripts/extended/base.js
index 8975e1cc..e3ca729b 100644
--- a/framework/Web/Javascripts/extended/base.js
+++ b/framework/Web/Javascripts/extended/base.js
@@ -29,7 +29,6 @@ function $(n,d) {
 Function.prototype.bindEvent = function() {
   var __method = this, args = $A(arguments), object = args.shift();
   return function(event) {
-    return __method.apply(object, [event || window.event].concat(args));
+    return __method.call(object, event || window.event, args);
   }
 }
-
diff --git a/framework/Web/Javascripts/extended/util.js b/framework/Web/Javascripts/extended/util.js
index 47d620b0..fc5ec844 100644
--- a/framework/Web/Javascripts/extended/util.js
+++ b/framework/Web/Javascripts/extended/util.js
@@ -86,6 +86,6 @@ function isElement(o, strict) {
 /** 
  * true if o is an Array or a NodeList, (NodeList in Opera returns a type of function)
  */
-function isList(o) { return o && isObject(o) && (isArray(o) || (o.item && o.tagName.toLowerCase() != "select")) }
+function isList(o) { return o && isObject(o) && isArray(o) }
 
 
diff --git a/framework/Web/Javascripts/extra/logger.js b/framework/Web/Javascripts/extra/logger.js
index f6383480..6500d79f 100644
--- a/framework/Web/Javascripts/extra/logger.js
+++ b/framework/Web/Javascripts/extra/logger.js
@@ -676,7 +676,7 @@ Prado.Inspector =
 			this.d.body.removeChild(this.d.getElementById("so_mContainer"));
 			this.d.body.removeChild(this.d.getElementById("so_mStyle"));
 			if(typeof Event != "undefined")
-				Event.stopObserving(this.d, "keydown", this.handleKeyEvent.bind(this));
+				Event.stopObserving(this.d, "keydown", this.dKeyDownEvent);
 			this.types = new Array();
 			this.objs = new Array();
 			this.hidden = new Array();
@@ -695,8 +695,9 @@ Prado.Inspector =
 		sObj.id="so_mStyle";
 		sObj.type="text/css";
 		sObj.innerHTML = this.style;
+		this.dKeyDownEvent = this.handleKeyEvent.bind(this);
 		if(typeof Event != "undefined")
-			Event.observe(this.d, "keydown", this.handleKeyEvent.bind(this));
+			Event.observe(this.d, "keydown", this.dKeyDownEvent);
 
 		this.parseJS(obj);
 		this.buildTree();
diff --git a/framework/Web/Javascripts/js/datepicker.js b/framework/Web/Javascripts/js/datepicker.js
index b57da791..d4ba0d2c 100644
--- a/framework/Web/Javascripts/js/datepicker.js
+++ b/framework/Web/Javascripts/js/datepicker.js
@@ -1,103 +1,55 @@
-Prado.Calendar=Class.create();
-Prado.Calendar.Util=Class.create();
-Object.extend(Prado.Calendar.Util,{IsLeapYear:function(_1){
-return ((_1%4==0)&&((_1%100!=0)||(_1%400==0)));
-},yearLength:function(_2){
-if(this.isLeapYear(_2)){
-return 366;
-}else{
-return 365;
-}
-},dayOfYear:function(_3){
-var a=this.isLeapYear(_3.getFullYear())?Calendar.LEAP_NUM_DAYS:Calendar.NUM_DAYS;
-return a[_3.getMonth()]+_3.getDate();
-},browser:function(){
-var _5={Version:"1.0"};
-var _6=parseInt(navigator.appVersion);
-_5.nver=_6;
-_5.ver=navigator.appVersion;
-_5.agent=navigator.userAgent;
-_5.dom=document.getElementById?1:0;
-_5.opera=window.opera?1:0;
-_5.ie5=(_5.ver.indexOf("MSIE 5")>-1&&_5.dom&&!_5.opera)?1:0;
-_5.ie6=(_5.ver.indexOf("MSIE 6")>-1&&_5.dom&&!_5.opera)?1:0;
-_5.ie4=(document.all&&!_5.dom&&!_5.opera)?1:0;
-_5.ie=_5.ie4||_5.ie5||_5.ie6;
-_5.mac=_5.agent.indexOf("Mac")>-1;
-_5.ns6=(_5.dom&&parseInt(_5.ver)>=5)?1:0;
-_5.ie3=(_5.ver.indexOf("MSIE")&&(_6<4));
-_5.hotjava=(_5.agent.toLowerCase().indexOf("hotjava")!=-1)?1:0;
-_5.ns4=(document.layers&&!_5.dom&&!_5.hotjava)?1:0;
-_5.bw=(_5.ie6||_5.ie5||_5.ie4||_5.ns4||_5.ns6||_5.opera);
-_5.ver3=(_5.hotjava||_5.ie3);
-_5.opera7=((_5.agent.toLowerCase().indexOf("opera 7")>-1)||(_5.agent.toLowerCase().indexOf("opera/7")>-1));
-_5.operaOld=_5.opera&&!_5.opera7;
-return _5;
-},ImportCss:function(_7,_8){
-if(this.browser().ie){
-var _9=_7.createStyleSheet(_8);
-}else{
-var elm=_7.createElement("link");
-elm.rel="stylesheet";
-elm.href=_8;
-if(headArr=_7.getElementsByTagName("head")){
-headArr[0].appendChild(elm);
-}
-}
-}});
-Object.extend(Prado.Calendar,{NUM_DAYS:[0,31,59,90,120,151,181,212,243,273,304,334],LEAP_NUM_DAYS:[0,31,60,91,121,152,182,213,244,274,305,335]});
-Prado.Calendar.prototype={monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],shortWeekDayNames:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],format:"yyyy-MM-dd",css:"calendar_system.css",initialize:function(_11,_12){
-this.attr=_12||[];
-this.control=$(_11);
+Prado.WebUI.TDatePicker=Class.create();
+Prado.WebUI.TDatePicker.prototype={MonthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],ShortWeekDayNames:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],Format:"yyyy-MM-dd",FirstDayOfWeek:1,ClassName:"TDatePicker",FromYear:2000,UpToYear:2015,initialize:function(_1,_2){
+this.attr=_2||[];
+this.control=$(_1);
 this.dateSlot=new Array(42);
 this.weekSlot=new Array(6);
-this.firstDayOfWeek=1;
 this.minimalDaysInFirstWeek=4;
-this.currentDate=new Date();
-this.selectedDate=null;
-this.className="Prado_Calendar";
-this.trigger=this.attr.trigger?$(this.attr.trigger):this.control;
-Event.observe(this.trigger,"click",this.show.bind(this));
-Prado.Calendar.Util.ImportCss(document,this.css);
-if(this.attr.format){
-this.format=this.attr.format;
+this.selectedDate=this.newDate();
+if(this.attr.Trigger){
+this.trigger=$(this.attr.Trigger);
+var _3=this.attr.TriggerEvent||"click";
+}else{
+this.trigger=this.control;
+var _3=this.attr.TriggerEvent||"focus";
 }
+Event.observe(this.trigger,_3,this.show.bindEvent(this));
+Object.extend(this,_2);
 this.create();
-this.hookEvents();
 },create:function(){
-var div;
-var _14;
-var _15;
+var _4;
+var _5;
+var _6;
 var tr;
 var td;
 this._calDiv=document.createElement("div");
-this._calDiv.className=this.className;
+this._calDiv.className=this.ClassName;
 this._calDiv.style.display="none";
-div=document.createElement("div");
-div.className="calendarHeader";
-this._calDiv.appendChild(div);
-_14=document.createElement("table");
-_14.style.cellSpacing=0;
-div.appendChild(_14);
-_15=document.createElement("tbody");
-_14.appendChild(_15);
+_4=document.createElement("div");
+_4.className="calendarHeader";
+this._calDiv.appendChild(_4);
+_5=document.createElement("table");
+_5.style.cellSpacing=0;
+_4.appendChild(_5);
+_6=document.createElement("tbody");
+_5.appendChild(_6);
 tr=document.createElement("tr");
-_15.appendChild(tr);
+_6.appendChild(tr);
 td=document.createElement("td");
-td.className="prevMonthButton";
-this._previousMonth=document.createElement("button");
-this._previousMonth.appendChild(document.createTextNode("<<"));
-td.appendChild(this._previousMonth);
+var _9=document.createElement("button");
+_9.className="prevMonthButton";
+_9.appendChild(document.createTextNode("<<"));
+td.appendChild(_9);
 tr.appendChild(td);
 td=document.createElement("td");
-td.className="labelContainer";
 tr.appendChild(td);
 this._monthSelect=document.createElement("select");
-for(var i=0;i<this.monthNames.length;i++){
+this._monthSelect.className="months";
+for(var i=0;i<this.MonthNames.length;i++){
 var opt=document.createElement("option");
-opt.innerHTML=this.monthNames[i];
+opt.innerHTML=this.MonthNames[i];
 opt.value=i;
-if(i==this.currentDate.getMonth()){
+if(i==this.selectedDate.getMonth()){
 opt.selected=true;
 }
 this._monthSelect.appendChild(opt);
@@ -107,11 +59,11 @@ td=document.createElement("td");
 td.className="labelContainer";
 tr.appendChild(td);
 this._yearSelect=document.createElement("select");
-for(var i=1920;i<2050;++i){
+for(var i=this.FromYear;i<=this.UpToYear;++i){
 var opt=document.createElement("option");
 opt.innerHTML=i;
 opt.value=i;
-if(i==this.currentDate.getFullYear()){
+if(i==this.selectedDate.getFullYear()){
 opt.selected=false;
 }
 this._yearSelect.appendChild(opt);
@@ -119,123 +71,152 @@ this._yearSelect.appendChild(opt);
 td.appendChild(this._yearSelect);
 td=document.createElement("td");
 td.className="nextMonthButton";
-this._nextMonth=document.createElement("button");
-this._nextMonth.appendChild(document.createTextNode(">>"));
-td.appendChild(this._nextMonth);
+var _12=document.createElement("button");
+_12.appendChild(document.createTextNode(">>"));
+td.appendChild(_12);
 tr.appendChild(td);
-div=document.createElement("div");
-div.className="calendarBody";
-this._calDiv.appendChild(div);
-this._table=div;
-var _20;
-_14=document.createElement("table");
-_14.className="grid";
-div.appendChild(_14);
-var _21=document.createElement("thead");
-_14.appendChild(_21);
+_4=document.createElement("div");
+_4.className="calendarBody";
+this._calDiv.appendChild(_4);
+var _13=_4;
+var _14;
+_5=document.createElement("table");
+_5.className="grid";
+_4.appendChild(_5);
+var _15=document.createElement("thead");
+_5.appendChild(_15);
 tr=document.createElement("tr");
-_21.appendChild(tr);
+_15.appendChild(tr);
 for(i=0;i<7;++i){
 td=document.createElement("th");
-_20=document.createTextNode(this.shortWeekDayNames[(i+this.firstDayOfWeek)%7]);
-td.appendChild(_20);
+_14=document.createTextNode(this.ShortWeekDayNames[(i+this.FirstDayOfWeek)%7]);
+td.appendChild(_14);
 td.className="weekDayHead";
 tr.appendChild(td);
 }
-_15=document.createElement("tbody");
-_14.appendChild(_15);
+_6=document.createElement("tbody");
+_5.appendChild(_6);
 for(week=0;week<6;++week){
 tr=document.createElement("tr");
-_15.appendChild(tr);
+_6.appendChild(tr);
 for(day=0;day<7;++day){
 td=document.createElement("td");
 td.className="calendarDate";
-_20=document.createTextNode(String.fromCharCode(160));
-td.appendChild(_20);
+_14=document.createTextNode(String.fromCharCode(160));
+td.appendChild(_14);
 tr.appendChild(td);
 var tmp=new Object();
 tmp.tag="DATE";
 tmp.value=-1;
-tmp.data=_20;
+tmp.data=_14;
 this.dateSlot[(week*7)+day]=tmp;
-Event.observe(td,"mouseover",this.hover.bind(this));
-Event.observe(td,"mouseout",this.hover.bind(this));
-}
-}
-div=document.createElement("div");
-div.className="calendarFooter";
-this._calDiv.appendChild(div);
-_14=document.createElement("table");
-_14.className="footerTable";
-div.appendChild(_14);
-_15=document.createElement("tbody");
-_14.appendChild(_15);
-tr=document.createElement("tr");
-_15.appendChild(tr);
-td=document.createElement("td");
-td.className="todayButton";
-this._todayButton=document.createElement("button");
-var _23=new Date();
-var _24=_23.getDate()+" "+this.monthNames[_23.getMonth()]+", "+_23.getFullYear();
-this._todayButton.appendChild(document.createTextNode(_24));
-td.appendChild(this._todayButton);
-tr.appendChild(td);
-td=document.createElement("td");
-td.className="clearButton";
-this._clearButton=document.createElement("button");
-var _23=new Date();
-_24="Clear";
-this._clearButton.appendChild(document.createTextNode(_24));
-td.appendChild(this._clearButton);
-tr.appendChild(td);
+Event.observe(td,"mouseover",this.hover.bindEvent(this));
+Event.observe(td,"mouseout",this.hover.bindEvent(this));
+}
+}
+_4=document.createElement("div");
+_4.className="calendarFooter";
+this._calDiv.appendChild(_4);
+var _17=document.createElement("button");
+_17.className="todayButton";
+var _18=this.newDate();
+var _19=_18.getDate()+" "+this.MonthNames[_18.getMonth()]+", "+_18.getFullYear();
+_17.appendChild(document.createTextNode(_19));
+_4.appendChild(_17);
+var _20=document.createElement("button");
+_20.className="clearButton";
+_19="Clear";
+_20.appendChild(document.createTextNode(_19));
+_4.appendChild(_20);
 document.body.appendChild(this._calDiv);
 this.update();
 this.updateHeader();
-return this._calDiv;
-},hookEvents:function(){
-this._previousMonth.hideFocus=true;
-this._nextMonth.hideFocus=true;
-this._todayButton.hideFocus=true;
-Event.observe(this._previousMonth,"click",this.prevMonth.bind(this));
-Event.observe(this._nextMonth,"click",this.nextMonth.bind(this));
-Event.observe(this._todayButton,"click",this.selectToday.bind(this));
-Event.observe(this._clearButton,"click",this.clearSelection.bind(this));
-Event.observe(this._monthSelect,"change",this.monthSelect.bind(this));
-Event.observe(this._yearSelect,"change",this.yearSelect.bind(this));
-Event.observe(this._calDiv,"mousewheel",this.mouseWheelChange.bind(this));
-Event.observe(this._table,"click",this.selectDate.bind(this));
-Event.observe(this._calDiv,"keydown",this.keyPressed.bind(this));
+this.ieHack(true);
+_9.hideFocus=true;
+_12.hideFocus=true;
+_17.hideFocus=true;
+Event.observe(_9,"click",this.prevMonth.bindEvent(this));
+Event.observe(_12,"click",this.nextMonth.bindEvent(this));
+Event.observe(_17,"click",this.selectToday.bindEvent(this));
+Event.observe(_20,"click",this.clearSelection.bindEvent(this));
+Event.observe(this._monthSelect,"change",this.monthSelect.bindEvent(this));
+Event.observe(this._yearSelect,"change",this.yearSelect.bindEvent(this));
+Event.observe(this._calDiv,"mousewheel",this.mouseWheelChange.bindEvent(this));
+Event.observe(_13,"click",this.selectDate.bindEvent(this));
+},ieHack:function(_21){
+if(this.iePopUp){
+this.iePopUp.style.display="block";
+this.iePopUp.style.top=(this._calDiv.offsetTop-1)+"px";
+this.iePopUp.style.left=(this._calDiv.offsetLeft-1)+"px";
+this.iePopUp.style.width=Math.abs(this._calDiv.offsetWidth-2)+"px";
+this.iePopUp.style.height=(this._calDiv.offsetHeight+1)+"px";
+if(_21){
+this.iePopUp.style.display="none";
+}
+}
 },keyPressed:function(ev){
+if(!this.showing){
+return;
+}
 if(!ev){
 ev=document.parentWindow.event;
 }
 var kc=ev.keyCode!=null?ev.keyCode:ev.charCode;
-if(kc=Event.KEY_RETURN){
-this.setSelectedDate(this.currentDate);
+if(kc==Event.KEY_RETURN){
+Event.stop(ev);
 this.hide();
-return false;
 }
+var _24=function(_25,_26){
+_25=(_25+12)%12;
+var _27=[31,28,31,30,31,30,31,31,30,31,30,31];
+var res=_27[_25];
+if(_25==1){
+res+=_26%4==0&&!(_26%400==0)?1:0;
+}
+return res;
+};
 if(kc<37||kc>40){
 return true;
 }
-var d=new Date(this.currentDate).valueOf();
+var _29=this.selectedDate;
+var d=_29.valueOf();
 if(kc==Event.KEY_LEFT){
+if(ev.ctrlKey||ev.shiftKey){
+_29.setDate(Math.min(_29.getDate(),_24(_29.getMonth()-1,_29.getFullYear())));
+d=_29.setMonth(_29.getMonth()-1);
+}else{
 d-=86400000;
+}
 }else{
 if(kc==Event.KEY_RIGHT){
+if(ev.ctrlKey||ev.shiftKey){
+_29.setDate(Math.min(_29.getDate(),_24(_29.getMonth()+1,_29.getFullYear())));
+d=_29.setMonth(_29.getMonth()+1);
+}else{
 d+=86400000;
+}
 }else{
 if(kc==Event.KEY_UP){
+if(ev.ctrlKey||ev.shiftKey){
+_29.setDate(Math.min(_29.getDate(),_24(_29.getMonth(),_29.getFullYear()-1)));
+d=_29.setFullYear(_29.getFullYear()-1);
+}else{
 d-=604800000;
+}
 }else{
 if(kc==Event.KEY_DOWN){
-d+=604800000;
+if(ev.ctrlKey||ev.shiftKey){
+_29.setDate(Math.min(_29.getDate(),_24(_29.getMonth(),_29.getFullYear()+1)));
+d=_29.setFullYear(_29.getFullYear()+1);
+}else{
+d+=7*24*61*60*1000;
 }
 }
 }
 }
-this.setCurrentDate(new Date(d));
-return false;
+}
+this.setSelectedDate(d);
+Event.stop(ev);
 },selectDate:function(ev){
 var el=Event.element(ev);
 while(el.nodeType!=1){
@@ -247,7 +228,7 @@ el=el.parentNode;
 if(el==null||el.tagName==null||el.tagName.toLowerCase()!="td"){
 return;
 }
-var d=new Date(this.currentDate);
+var d=this.newDate(this.selectedDate);
 var n=Number(el.firstChild.data);
 if(isNaN(n)||n<=0||n==null){
 return;
@@ -256,13 +237,10 @@ d.setDate(n);
 this.setSelectedDate(d);
 this.hide();
 },selectToday:function(){
-this.setSelectedDate(new Date());
+this.setSelectedDate(this.newDate());
 this.hide();
 },clearSelection:function(){
-this.selectedDate=null;
-if(isFunction(this.onchange)){
-this.onchange();
-}
+this.setSelectedDate(this.newDate());
 this.hide();
 },monthSelect:function(ev){
 this.setMonth(Form.Element.getValue(Event.element(ev)));
@@ -273,62 +251,65 @@ if(e==null){
 e=document.parentWindow.event;
 }
 var n=-e.wheelDelta/120;
-var d=new Date(this.currentDate);
-var m=this.getMonth()+n;
+var d=this.newDate(this.selectedDate);
+var m=d.getMonth()+n;
 this.setMonth(m);
-this.setCurrentDate(d);
 return false;
 },onchange:function(){
 this.control.value=this.formatDate();
 },formatDate:function(){
-return Prado.Calendar.Util.FormatDate(this.selectedDate,this.format);
-},setCurrentDate:function(_32){
-if(_32==null){
-return;
+return this.selectedDate?this.selectedDate.SimpleFormat(this.Format):"";
+},newDate:function(_35){
+if(!_35){
+_35=new Date();
+}
+if(isString(_35)||isNumber(_35)){
+_35=new Date(_35);
 }
-if(isString(_32)||isNumber(_32)){
-_32=new Date(_32);
+return new Date(_35.getFullYear(),_35.getMonth(),_35.getDate(),0,0,0);
+},setSelectedDate:function(_36){
+if(_36==null){
+return;
 }
-if(this.currentDate.getDate()!=_32.getDate()||this.currentDate.getMonth()!=_32.getMonth()||this.currentDate.getFullYear()!=_32.getFullYear()){
-this.currentDate=new Date(_32);
+this.selectedDate=this.newDate(_36);
 this.updateHeader();
 this.update();
-}
-},setSelectedDate:function(_33){
-this.selectedDate=new Date(_33);
-this.setCurrentDate(this.selectedDate);
 if(isFunction(this.onchange)){
 this.onchange();
 }
 },getElement:function(){
 return this._calDiv;
 },getSelectedDate:function(){
-return isNull(this.selectedDate)?null:new Date(this.selectedDate);
-},setYear:function(_34){
-var d=new Date(this.currentDate);
-d.setFullYear(_34);
-this.setCurrentDate(d);
-},setMonth:function(_35){
-var d=new Date(this.currentDate);
-d.setMonth(_35);
-this.setCurrentDate(d);
+return isNull(this.selectedDate)?null:this.newDate(this.selectedDate);
+},setYear:function(_37){
+var d=this.newDate(this.selectedDate);
+d.setFullYear(_37);
+this.setSelectedDate(d);
+},setMonth:function(_38){
+var d=this.newDate(this.selectedDate);
+d.setMonth(_38);
+this.setSelectedDate(d);
 },nextMonth:function(){
-this.setMonth(this.currentDate.getMonth()+1);
+this.setMonth(this.selectedDate.getMonth()+1);
 },prevMonth:function(){
-this.setMonth(this.currentDate.getMonth()-1);
+this.setMonth(this.selectedDate.getMonth()-1);
 },show:function(){
 if(!this.showing){
 var pos=Position.cumulativeOffset(this.control);
 pos[1]+=this.control.offsetHeight;
 this._calDiv.style.display="block";
-this._calDiv.style.top=pos[1]+"px";
+this._calDiv.style.top=(pos[1]-1)+"px";
 this._calDiv.style.left=pos[0]+"px";
-Event.observe(document.body,"click",this.hideOnClick.bind(this));
-var _37=Prado.Calendar.Util.ParseDate(Form.Element.getValue(this.control),this.format);
-if(!isNull(_37)){
-this.selectedDate=_37;
-this.setCurrentDate(_37);
-}
+this.ieHack(false);
+this.documentClickEvent=this.hideOnClick.bindEvent(this);
+this.documentKeyDownEvent=this.keyPressed.bindEvent(this);
+Event.observe(document.body,"click",this.documentClickEvent);
+var _40=Date.SimpleParse(Form.Element.getValue(this.control),this.Format);
+if(!isNull(_40)){
+this.selectedDate=_40;
+this.setSelectedDate(_40);
+}
+Event.observe(document,"keydown",this.documentKeyDownEvent);
 this.showing=true;
 }
 },hideOnClick:function(ev){
@@ -336,86 +317,85 @@ if(!this.showing){
 return;
 }
 var el=Event.element(ev);
-var _38=false;
+var _41=false;
 do{
-_38=_38||el.className==this.className;
-_38=_38||el==this.trigger;
-_38=_38||el==this.control;
-if(_38){
+_41=_41||el.className==this.ClassName;
+_41=_41||el==this.trigger;
+_41=_41||el==this.control;
+if(_41){
 break;
 }
 el=el.parentNode;
 }while(el);
-if(!_38){
+if(!_41){
 this.hide();
 }
 },hide:function(){
 if(this.showing){
 this._calDiv.style.display="none";
+if(this.iePopUp){
+this.iePopUp.style.display="none";
+}
 this.showing=false;
-Event.stopObserving(document.body,"click",this.hideOnClick.bind(this));
+Event.stopObserving(document.body,"click",this.documentClickEvent);
+Event.stopObserving(document,"keydown",this.documentKeyDownEvent);
 }
 },update:function(){
-var _39=Prado.Calendar.Util;
-var _40=this.currentDate;
-var _41=_39.ISODate(new Date());
-var _42=isNull(this.selectedDate)?"":_39.ISODate(this.selectedDate);
-var _43=_39.ISODate(_40);
-var d1=new Date(_40.getFullYear(),_40.getMonth(),1);
-var d2=new Date(_40.getFullYear(),_40.getMonth()+1,1);
-var _46=Math.round((d2-d1)/(24*60*60*1000));
-var _47=(d1.getDay()-this.firstDayOfWeek)%7;
-if(_47<0){
-_47+=7;
-}
-var _48=0;
-while(_48<_47){
-this.dateSlot[_48].value=-1;
-this.dateSlot[_48].data.data=String.fromCharCode(160);
-this.dateSlot[_48].data.parentNode.className="empty";
-_48++;
-}
-for(i=1;i<=_46;i++,_48++){
-var _49=this.dateSlot[_48];
-var _50=_49.data.parentNode;
-_49.value=i;
-_49.data.data=i;
-_50.className="date";
-if(_39.ISODate(d1)==_41){
-_50.className+=" today";
-}
-if(_39.ISODate(d1)==_43){
-_50.className+=" current";
-}
-if(_39.ISODate(d1)==_42){
-_50.className+=" selected";
+var _42=this.selectedDate;
+var _43=(this.newDate()).toISODate();
+var _44=_42.toISODate();
+var d1=new Date(_42.getFullYear(),_42.getMonth(),1);
+var d2=new Date(_42.getFullYear(),_42.getMonth()+1,1);
+var _47=Math.round((d2-d1)/(24*60*60*1000));
+var _48=(d1.getDay()-this.FirstDayOfWeek)%7;
+if(_48<0){
+_48+=7;
+}
+var _49=0;
+while(_49<_48){
+this.dateSlot[_49].value=-1;
+this.dateSlot[_49].data.data=String.fromCharCode(160);
+this.dateSlot[_49].data.parentNode.className="empty";
+_49++;
+}
+for(i=1;i<=_47;i++,_49++){
+var _50=this.dateSlot[_49];
+var _51=_50.data.parentNode;
+_50.value=i;
+_50.data.data=i;
+_51.className="date";
+if(d1.toISODate()==_43){
+_51.className+=" today";
+}
+if(d1.toISODate()==_44){
+_51.className+=" selected";
 }
 d1=new Date(d1.getFullYear(),d1.getMonth(),d1.getDate()+1);
 }
-var _51=_48;
-while(_48<42){
-this.dateSlot[_48].value=-1;
-this.dateSlot[_48].data.data=String.fromCharCode(160);
-this.dateSlot[_48].data.parentNode.className="empty";
-++_48;
+var _52=_49;
+while(_49<42){
+this.dateSlot[_49].value=-1;
+this.dateSlot[_49].data.data=String.fromCharCode(160);
+this.dateSlot[_49].data.parentNode.className="empty";
+++_49;
 }
 },hover:function(ev){
 Element.condClassName(Event.element(ev),"hover",ev.type=="mouseover");
 },updateHeader:function(){
-var _52=this._monthSelect.options;
-var m=this.currentDate.getMonth();
-for(var i=0;i<_52.length;++i){
-_52[i].selected=false;
-if(_52[i].value==m){
-_52[i].selected=true;
-}
-}
-_52=this._yearSelect.options;
-var _53=this.currentDate.getFullYear();
-for(var i=0;i<_52.length;++i){
-_52[i].selected=false;
-if(_52[i].value==_53){
-_52[i].selected=true;
+var _53=this._monthSelect.options;
+var m=this.selectedDate.getMonth();
+for(var i=0;i<_53.length;++i){
+_53[i].selected=false;
+if(_53[i].value==m){
+_53[i].selected=true;
+}
+}
+_53=this._yearSelect.options;
+var _54=this.selectedDate.getFullYear();
+for(var i=0;i<_53.length;++i){
+_53[i].selected=false;
+if(_53[i].value==_54){
+_53[i].selected=true;
 }
 }
 }};
diff --git a/framework/Web/Javascripts/js/prado.js b/framework/Web/Javascripts/js/prado.js
index 1f92a539..92bd4921 100644
--- a/framework/Web/Javascripts/js/prado.js
+++ b/framework/Web/Javascripts/js/prado.js
@@ -155,7 +155,7 @@ function isElement(o,_5){
 return o&&isObject(o)&&((!_5&&(o==window||o==document))||o.nodeType==1);
 }
 function isList(o){
-return o&&isObject(o)&&(isArray(o)||o.item);
+return o&&isObject(o)&&isArray(o);
 }
 
 function isElement(o,_2){
@@ -193,7 +193,7 @@ return x;
 Function.prototype.bindEvent=function(){
 var _6=this,args=$A(arguments),object=args.shift();
 return function(_7){
-return _6.apply(object,[_7||window.event].concat(args));
+return _6.call(object,_7||window.event,args);
 };
 };
 
@@ -258,12 +258,7 @@ return this.pad("left",_6,_7);
 },padRight:function(_8,_9){
 return this.pad("right",_8,_9);
 },zerofill:function(len){
-var s=this;
-var ix=/^[+-]/.test(s)?1:0;
-while(s.length<len){
-s=s.insert(ix,"0");
-}
-return s;
+return this.padLeft(len,"0");
 },trim:function(){
 return this.replace(/^\s+|\s+$/g,"");
 },trimLeft:function(){
@@ -271,15 +266,15 @@ return this.replace(/^\s+/,"");
 },trimRight:function(){
 return this.replace(/\s+$/,"");
 },toFunction:function(){
-var _12=this.split(/\./);
-var _13=window;
-_12.each(function(_14){
-if(_13[new String(_14)]){
-_13=_13[new String(_14)];
+var _11=this.split(/\./);
+var _12=window;
+_11.each(function(_13){
+if(_12[new String(_13)]){
+_12=_12[new String(_13)];
 }
 });
-if(isFunction(_13)){
-return _13;
+if(isFunction(_12)){
+return _12;
 }else{
 if(typeof Logger!="undefined"){
 Logger.error("Missing function",this);
@@ -293,28 +288,28 @@ return null;
 }
 var num=parseInt(this,10);
 return (isNaN(num)?null:num);
-},toDouble:function(_17){
-_17=_17||".";
-var exp=new RegExp("^\\s*([-\\+])?(\\d+)?(\\"+_17+"(\\d+))?\\s*$");
+},toDouble:function(_16){
+_16=_16||".";
+var exp=new RegExp("^\\s*([-\\+])?(\\d+)?(\\"+_16+"(\\d+))?\\s*$");
 var m=this.match(exp);
 if(m==null){
 return null;
 }
-var _19=m[1]+(m[2].length>0?m[2]:"0")+"."+m[4];
-var num=parseFloat(_19);
+var _18=m[1]+(m[2].length>0?m[2]:"0")+"."+m[4];
+var num=parseFloat(_18);
 return (isNaN(num)?null:num);
-},toCurrency:function(_20,_21,_22){
-_20=_20||",";
-_22=_22||".";
-_21=typeof (_21)=="undefined"?2:_21;
-var exp=new RegExp("^\\s*([-\\+])?(((\\d+)\\"+_20+")*)(\\d+)"+((_21>0)?"(\\"+_22+"(\\d{1,"+_21+"}))?":"")+"\\s*$");
+},toCurrency:function(_19,_20,_21){
+_19=_19||",";
+_21=_21||".";
+_20=typeof (_20)=="undefined"?2:_20;
+var exp=new RegExp("^\\s*([-\\+])?(((\\d+)\\"+_19+")*)(\\d+)"+((_20>0)?"(\\"+_21+"(\\d{1,"+_20+"}))?":"")+"\\s*$");
 var m=this.match(exp);
 if(m==null){
 return null;
 }
-var _23=m[2]+m[5];
-var _24=m[1]+_23.replace(new RegExp("(\\"+_20+")","g"),"")+((_21>0)?"."+m[7]:"");
-var num=parseFloat(_24);
+var _22=m[2]+m[5];
+var _23=m[1]+_22.replace(new RegExp("(\\"+_19+")","g"),"")+((_20>0)?"."+m[7]:"");
+var num=parseFloat(_23);
 return (isNaN(num)?null:num);
 }});
 
@@ -1969,9 +1964,9 @@ return _89;
 Object.extend(Date.prototype,{SimpleFormat:function(_1){
 var _2=new Array();
 _2["d"]=this.getDate();
-_2["dd"]=Prado.Util.pad(this.getDate(),2);
+_2["dd"]=String(this.getDate()).zerofill(2);
 _2["M"]=this.getMonth()+1;
-_2["MM"]=Prado.Util.pad(this.getMonth()+1,2);
+_2["MM"]=String(this.getMonth()+1).zerofill(2);
 var _3=""+this.getFullYear();
 _3=(_3.length==2)?"19"+_3:_3;
 _2["yyyy"]=_3;
@@ -1984,8 +1979,8 @@ _4=_4.replace(_6,_2[_5]);
 return _4;
 },toISODate:function(){
 var y=this.getFullYear();
-var m=Prado.Util.pad(this.getMonth()+1);
-var d=Prado.Util.pad(this.getDate());
+var m=String(this.getMonth()+1).zerofill(2);
+var d=String(this.getDate()).zerofill(2);
 return String(y)+String(m)+String(d);
 }});
 Object.extend(Date,{SimpleParse:function(_10,_11){
@@ -2106,7 +2101,40 @@ var _31=new Date(_28,_29-1,_30,0,0,0);
 return _31;
 }});
 
-var Prado={Version:"3.0a"};
+var Prado={Version:"3.0a",Browser:function(){
+var _1={Version:"1.0"};
+var _2=parseInt(navigator.appVersion);
+_1.nver=_2;
+_1.ver=navigator.appVersion;
+_1.agent=navigator.userAgent;
+_1.dom=document.getElementById?1:0;
+_1.opera=window.opera?1:0;
+_1.ie5=(_1.ver.indexOf("MSIE 5")>-1&&_1.dom&&!_1.opera)?1:0;
+_1.ie6=(_1.ver.indexOf("MSIE 6")>-1&&_1.dom&&!_1.opera)?1:0;
+_1.ie4=(document.all&&!_1.dom&&!_1.opera)?1:0;
+_1.ie=_1.ie4||_1.ie5||_1.ie6;
+_1.mac=_1.agent.indexOf("Mac")>-1;
+_1.ns6=(_1.dom&&parseInt(_1.ver)>=5)?1:0;
+_1.ie3=(_1.ver.indexOf("MSIE")&&(_2<4));
+_1.hotjava=(_1.agent.toLowerCase().indexOf("hotjava")!=-1)?1:0;
+_1.ns4=(document.layers&&!_1.dom&&!_1.hotjava)?1:0;
+_1.bw=(_1.ie6||_1.ie5||_1.ie4||_1.ns4||_1.ns6||_1.opera);
+_1.ver3=(_1.hotjava||_1.ie3);
+_1.opera7=((_1.agent.toLowerCase().indexOf("opera 7")>-1)||(_1.agent.toLowerCase().indexOf("opera/7")>-1));
+_1.operaOld=_1.opera&&!_1.opera7;
+return _1;
+},ImportCss:function(_3,_4){
+if(Prado.Browser().ie){
+var _5=_3.createStyleSheet(_4);
+}else{
+var _6=_3.createElement("link");
+_6.rel="stylesheet";
+_6.href=_4;
+if(headArr=_3.getElementsByTagName("head")){
+headArr[0].appendChild(_6);
+}
+}
+}};
 
 Prado.Focus=Class.create();
 Prado.Focus.setFocus=function(id){
diff --git a/framework/Web/Javascripts/prado/datepicker.js b/framework/Web/Javascripts/prado/datepicker.js
index ff271150..680008bd 100644
--- a/framework/Web/Javascripts/prado/datepicker.js
+++ b/framework/Web/Javascripts/prado/datepicker.js
@@ -1,91 +1,20 @@
-Prado.Calendar = Class.create();
-
-Prado.Calendar.Util = Class.create();
-
-Object.extend(Prado.Calendar.Util,
-{	
-	IsLeapYear : function (year) 
-	{
-		return ((year%4 == 0) && ((year%100 != 0) || (year%400 == 0)));
-	},
-	
-	yearLength : function(year) 
-	{
-		if (this.isLeapYear(year))
-			return 366;
-		else
-			return 365;
-	},
-	
-	dayOfYear : function(date) 
-	{
-		var a = this.isLeapYear(date.getFullYear()) ? 
-					Calendar.LEAP_NUM_DAYS : Calendar.NUM_DAYS;	
-		return a[date.getMonth()] + date.getDate();
-	},
-	
-	browser : function()
-	{
-		var info = { Version : "1.0" };
-		var is_major = parseInt( navigator.appVersion );
-		info.nver = is_major;
-		info.ver = navigator.appVersion;
-		info.agent = navigator.userAgent;
-		info.dom = document.getElementById ? 1 : 0;
-		info.opera = window.opera ? 1 : 0;
-		info.ie5 = ( info.ver.indexOf( "MSIE 5" ) > -1 && info.dom && !info.opera ) ? 1 : 0;
-		info.ie6 = ( info.ver.indexOf( "MSIE 6" ) > -1 && info.dom && !info.opera ) ? 1 : 0;
-		info.ie4 = ( document.all && !info.dom && !info.opera ) ? 1 : 0;
-		info.ie = info.ie4 || info.ie5 || info.ie6;
-		info.mac = info.agent.indexOf( "Mac" ) > -1;
-		info.ns6 = ( info.dom && parseInt( info.ver ) >= 5 ) ? 1 : 0;
-		info.ie3 = ( info.ver.indexOf( "MSIE" ) && ( is_major < 4 ) );
-		info.hotjava = ( info.agent.toLowerCase().indexOf( 'hotjava' ) != -1 ) ? 1 : 0;
-		info.ns4 = ( document.layers && !info.dom && !info.hotjava ) ? 1 : 0;
-		info.bw = ( info.ie6 || info.ie5 || info.ie4 || info.ns4 || info.ns6 || info.opera );
-		info.ver3 = ( info.hotjava || info.ie3 );
-		info.opera7 = ( ( info.agent.toLowerCase().indexOf( 'opera 7' ) > -1 ) || ( info.agent.toLowerCase().indexOf( 'opera/7' ) > -1 ) );
-		info.operaOld = info.opera && !info.opera7;
-		return info;
-	},
-	
-	ImportCss : function(doc, css_file) 
-	{
-		if (this.browser().ie)
-			var styleSheet = doc.createStyleSheet(css_file);
-		else 
-		{
-			var elm = doc.createElement("link");
-
-			elm.rel = "stylesheet";
-			elm.href = css_file;
-
-			if (headArr = doc.getElementsByTagName("head"))
-				headArr[0].appendChild(elm);
-		}
-	}
-});
-
-Object.extend(Prado.Calendar,
-{
-	// Accumulated days per month, for normal and for leap years.
-	// Used in week number calculations.	
-	NUM_DAYS : [0,31,59,90,120,151,181,212,243,273,304,334],
-	LEAP_NUM_DAYS : [0,31,60,91,121,152,182,213,244,274,305,335]
-});
-
-Prado.Calendar.prototype = 
+Prado.WebUI.TDatePicker = Class.create();
+Prado.WebUI.TDatePicker.prototype = 
 {
-	monthNames : [	"January",		"February",		"March",	"April",
+	MonthNames : [	"January",		"February",		"March",	"April",
 		"May",			"June",			"July",		"August",
 		"September",	"October",		"November",	"December"
 	],
 
-	shortWeekDayNames : ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ],
+	ShortWeekDayNames : ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ],
 
-	format : "yyyy-MM-dd",
+	Format : "yyyy-MM-dd",
+
+	FirstDayOfWeek : 1, // 0 for sunday
 	
-	css : "calendar_system.css",
+	ClassName : "TDatePicker",
+
+	FromYear : 2000, UpToYear: 2015,
 	
 	initialize : function(control, attr)
 	{
@@ -93,26 +22,28 @@ Prado.Calendar.prototype =
 		this.control = $(control);	
 		this.dateSlot = new Array(42);
 		this.weekSlot = new Array(6);
-		this.firstDayOfWeek = 1;
 		this.minimalDaysInFirstWeek	= 4;
-		this.currentDate = new Date();
-		this.selectedDate = null;
-		this.className = "TDatePicker";
+		this.selectedDate = this.newDate();
 		
 		//which element to trigger to show the calendar
-		this.trigger = this.attr.trigger ? $(this.attr.trigger) : this.control;
-		Event.observe(this.trigger, "click", this.show.bind(this));
-		
-		Prado.Calendar.Util.ImportCss(document, this.css);
-		
-		if(this.attr.format) this.format = this.attr.format;
+		if(this.attr.Trigger)
+		{
+			this.trigger = $(this.attr.Trigger) ;
+			var triggerEvent = this.attr.TriggerEvent || "click";
+		}
+		else
+		{
+			this.trigger  = this.control;
+			var triggerEvent = this.attr.TriggerEvent || "focus";
+		}
 		
-		//create it
+		Event.observe(this.trigger, triggerEvent, this.show.bindEvent(this));
+			
+		Object.extend(this,attr);
+
 		this.create();	
-		//alert("ok");
-		this.hookEvents();	
 	},
-	
+
 	create : function()
 	{
 		var div;
@@ -123,7 +54,7 @@ Prado.Calendar.prototype =
 	
 		// Create the top-level div element
 		this._calDiv = document.createElement("div");
-		this._calDiv.className = this.className;
+		this._calDiv.className = this.ClassName;
 		this._calDiv.style.display = "none";		
 		
 		// header div
@@ -143,10 +74,10 @@ Prado.Calendar.prototype =
 		
 		// Previous Month Button
 		td = document.createElement("td");
-		td.className = "prevMonthButton";
-		this._previousMonth = document.createElement("button");
-		this._previousMonth.appendChild(document.createTextNode("<<"));
-		td.appendChild(this._previousMonth);
+		var previousMonth = document.createElement("button");
+		previousMonth.className = "prevMonthButton";
+		previousMonth.appendChild(document.createTextNode("<<"));
+		td.appendChild(previousMonth);
 		tr.appendChild(td);
 		
 		
@@ -155,14 +86,14 @@ Prado.Calendar.prototype =
 		// Create the month drop down 
 		//
 		td = document.createElement("td");
-		td.className = "labelContainer";
 		tr.appendChild(td);
 		this._monthSelect = document.createElement("select");
-	    for (var i = 0 ; i < this.monthNames.length ; i++) {
+		this._monthSelect.className = "months";
+	    for (var i = 0 ; i < this.MonthNames.length ; i++) {
 	        var opt = document.createElement("option");
-	        opt.innerHTML = this.monthNames[i];
+	        opt.innerHTML = this.MonthNames[i];
 	        opt.value = i;
-	        if (i == this.currentDate.getMonth()) {
+	        if (i == this.selectedDate.getMonth()) {
 	            opt.selected = true;
 	        }
 	        this._monthSelect.appendChild(opt);
@@ -177,11 +108,11 @@ Prado.Calendar.prototype =
 		td.className = "labelContainer";
 		tr.appendChild(td);
 		this._yearSelect = document.createElement("select");
-		for(var i=1920; i < 2050; ++i) {
+		for(var i=this.FromYear; i <= this.UpToYear; ++i) {
 			var opt = document.createElement("option");
 			opt.innerHTML = i;
 			opt.value = i;
-			if (i == this.currentDate.getFullYear()) {
+			if (i == this.selectedDate.getFullYear()) {
 				opt.selected = false;
 			}
 			this._yearSelect.appendChild(opt);
@@ -191,16 +122,16 @@ Prado.Calendar.prototype =
 		
 		td = document.createElement("td");
 		td.className = "nextMonthButton";
-		this._nextMonth = document.createElement("button");
-		this._nextMonth.appendChild(document.createTextNode(">>"));
-		td.appendChild(this._nextMonth);
+		var nextMonth = document.createElement("button");
+		nextMonth.appendChild(document.createTextNode(">>"));
+		td.appendChild(nextMonth);
 		tr.appendChild(td);
 		
 		// Calendar body
 		div = document.createElement("div");
 		div.className = "calendarBody";
 		this._calDiv.appendChild(div);
-		this._table = div;
+		var calendarBody = div;
 		
 		// Create the inside of calendar body	
 		
@@ -217,7 +148,7 @@ Prado.Calendar.prototype =
 		
 		for(i=0; i < 7; ++i) {
 			td = document.createElement("th");
-			text = document.createTextNode(this.shortWeekDayNames[(i+this.firstDayOfWeek)%7]);
+			text = document.createTextNode(this.ShortWeekDayNames[(i+this.FirstDayOfWeek)%7]);
 			td.appendChild(text);
 			td.className = "weekDayHead";
 			tr.appendChild(td);
@@ -244,8 +175,8 @@ Prado.Calendar.prototype =
 				tmp.data = text;
 				this.dateSlot[(week*7)+day] = tmp;
 				
-				Event.observe(td, "mouseover", this.hover.bind(this));
-				Event.observe(td, "mouseout", this.hover.bind(this));
+				Event.observe(td, "mouseover", this.hover.bindEvent(this));
+				Event.observe(td, "mouseout", this.hover.bindEvent(this));
 				
 			}
 		}
@@ -254,135 +185,143 @@ Prado.Calendar.prototype =
 		div = document.createElement("div");
 		div.className = "calendarFooter";
 		this._calDiv.appendChild(div);
-		
-		table = document.createElement("table");
-		//table.style.width="100%";
-		table.className = "footerTable";
-		//table.cellSpacing = 0;
-		div.appendChild(table);
-		
-		tbody = document.createElement("tbody");
-		table.appendChild(tbody);
-		
-		tr = document.createElement("tr");
-		tbody.appendChild(tr);
 
-		//
-		// The TODAY button	
-		//
-		td = document.createElement("td");
-		td.className = "todayButton";
-		this._todayButton = document.createElement("button");
-		var today = new Date();
-		var buttonText = today.getDate() + " " + this.monthNames[today.getMonth()] + ", " + today.getFullYear();
-		this._todayButton.appendChild(document.createTextNode(buttonText));
-		td.appendChild(this._todayButton);
-		tr.appendChild(td);
-		
-		//
-		// The CLEAR button
-		//
-		td = document.createElement("td");
-		td.className = "clearButton";
-		this._clearButton = document.createElement("button");
-		var today = new Date();
+		var todayButton = document.createElement("button");
+		todayButton.className = "todayButton";
+		var today = this.newDate();
+		var buttonText = today.getDate() + " " + this.MonthNames[today.getMonth()] + ", " + today.getFullYear();
+		todayButton.appendChild(document.createTextNode(buttonText));
+		div.appendChild(todayButton);
+		
+		var clearButton = document.createElement("button");
+		clearButton.className = "clearButton";
 		buttonText = "Clear";
-		this._clearButton.appendChild(document.createTextNode(buttonText));
-		td.appendChild(this._clearButton);
-		tr.appendChild(td);
+		clearButton.appendChild(document.createTextNode(buttonText));
+		div.appendChild(clearButton);
 		
+/*		if(Prado.Browser().ie)
+		{
+			this.iePopUp = document.createElement('iframe');
+			this.iePopUp.src = "";
+			this.iePopUp.style.position = "absolute"
+			this.iePopUp.scrolling="no"
+			this.iePopUp.frameBorder="0"
+			document.body.appendChild(this.iePopUp);
+		}*/
+
 		document.body.appendChild(this._calDiv);
 		
 		this.update();
 		this.updateHeader();
 		
-		return this._calDiv;
-	},
-	
-	hookEvents : function()
-	{
+		this.ieHack(true);
+
 		// IE55+ extension		
-		this._previousMonth.hideFocus = true;
-		this._nextMonth.hideFocus = true;
-		this._todayButton.hideFocus = true;
+		previousMonth.hideFocus = true;
+		nextMonth.hideFocus = true;
+		todayButton.hideFocus = true;
 		// end IE55+ extension
 		
 		// hook up events
-		Event.observe(this._previousMonth, "click", this.prevMonth.bind(this));
-		Event.observe(this._nextMonth, "click", this.nextMonth.bind(this));
-		Event.observe(this._todayButton, "click", this.selectToday.bind(this));
-		Event.observe(this._clearButton, "click", this.clearSelection.bind(this));
-		Event.observe(this._monthSelect, "change", this.monthSelect.bind(this));
-		Event.observe(this._yearSelect, "change", this.yearSelect.bind(this));
+		Event.observe(previousMonth, "click", this.prevMonth.bindEvent(this));
+		Event.observe(nextMonth, "click", this.nextMonth.bindEvent(this));
+		Event.observe(todayButton, "click", this.selectToday.bindEvent(this));
+		Event.observe(clearButton, "click", this.clearSelection.bindEvent(this));
+		Event.observe(this._monthSelect, "change", this.monthSelect.bindEvent(this));
+		Event.observe(this._yearSelect, "change", this.yearSelect.bindEvent(this));
 
 		// ie6 extension
-		Event.observe(this._calDiv, "mousewheel", this.mouseWheelChange.bind(this));		
-		
-		Event.observe(this._table, "click", this.selectDate.bind(this));
+		Event.observe(this._calDiv, "mousewheel", this.mouseWheelChange.bindEvent(this));		
 		
-		Event.observe(this._calDiv,"keydown", this.keyPressed.bind(this)); 
-		
-		/*
-		this._calDiv.onkeydown = function (e) {
-			if (e == null) e = document.parentWindow.event;
-			var kc = e.keyCode != null ? e.keyCode : e.charCode;
-
-			if(kc == 13) {
-				var d = new Date(dp._currentDate).valueOf();
-				dp.setSelectedDate(d);
-
-				if (!dp._alwaysVisible && dp._hideOnSelect) {
-					dp.hide();
-				}
-				return false;
-			}
+		Event.observe(calendarBody, "click", this.selectDate.bindEvent(this));
 				
-			
-			if (kc < 37 || kc > 40) return true;
-			
-			var d = new Date(dp._currentDate).valueOf();
-			if (kc == 37) // left
-				d -= 24 * 60 * 60 * 1000;
-			else if (kc == 39) // right
-				d += 24 * 60 * 60 * 1000;
-			else if (kc == 38) // up
-				d -= 7 * 24 * 60 * 60 * 1000;
-			else if (kc == 40) // down
-				d += 7 * 24 * 60 * 60 * 1000;
-
-			dp.setCurrentDate(new Date(d));
-			return false;
-		}*/
-		
-		
 	},
 	
+	ieHack : function(cleanup) 
+	{
+		// IE hack
+		if(this.iePopUp) 
+		{
+			this.iePopUp.style.display = "block";
+			this.iePopUp.style.top = (this._calDiv.offsetTop -1 ) + "px";
+			this.iePopUp.style.left = (this._calDiv.offsetLeft -1)+ "px";
+			this.iePopUp.style.width = Math.abs(this._calDiv.offsetWidth -2)+ "px";
+			this.iePopUp.style.height = (this._calDiv.offsetHeight + 1)+ "px";
+			if(cleanup) this.iePopUp.style.display = "none";
+		}
+	},
+
 	keyPressed : function(ev)
 	{
+		if(!this.showing) return;
 		if (!ev) ev = document.parentWindow.event;
 		var kc = ev.keyCode != null ? ev.keyCode : ev.charCode;
 		
-		if(kc = Event.KEY_RETURN)
+		if(kc == Event.KEY_RETURN)
 		{
 			//var d = new Date(this.currentDate);
-			this.setSelectedDate(this.currentDate);
+			//this.setSelectedDate(this.currentDate);
+			Event.stop(ev);
 			this.hide();
-			return false;
 		}
 		
-		if(kc < 37 || kc > 40) return true;
 		
-		var d = new Date(this.currentDate).valueOf();
+		var getDaysPerMonth = function (nMonth, nYear) 
+		{
+			nMonth = (nMonth + 12) % 12;
+	        var days= [31,28,31,30,31,30,31,31,30,31,30,31];
+			var res = days[nMonth];
+			if (nMonth == 1) //feburary, leap years has 29
+                res += nYear % 4 == 0 && !(nYear % 400 == 0) ? 1 : 0;
+	        return res;
+		}
+
+		if(kc < 37 || kc > 40) return true;
+
+		var current = this.selectedDate;
+		var d = current.valueOf();
 		if(kc == Event.KEY_LEFT)
-			d -= 86400000; //-1 day
+		{
+			if(ev.ctrlKey || ev.shiftKey) // -1 month
+			{
+                current.setDate( Math.min(current.getDate(), getDaysPerMonth(current.getMonth() - 1,current.getFullYear())) ); // no need to catch dec -> jan for the year
+                d = current.setMonth( current.getMonth() - 1 );
+			}
+			else
+				d -= 86400000; //-1 day
+		}
 		else if (kc == Event.KEY_RIGHT)
-			d += 86400000; //+1 day
+		{
+			if(ev.ctrlKey || ev.shiftKey) // +1 month
+			{
+				current.setDate( Math.min(current.getDate(), getDaysPerMonth(current.getMonth() + 1,current.getFullYear())) ); // no need to catch dec -> jan for the year
+				d = current.setMonth( current.getMonth() + 1 );
+			}
+			else
+				d += 86400000; //+1 day
+		}
 		else if (kc == Event.KEY_UP)
-			d -= 604800000; // -7 days
-		else if (kc == Event.KEY_DOWN)
-			d += 604800000; // +7 days
-		this.setCurrentDate(new Date(d));
-		return false;		
+		{
+			if(ev.ctrlKey || ev.shiftKey) //-1 year
+			{
+				current.setDate( Math.min(current.getDate(), getDaysPerMonth(current.getMonth(),current.getFullYear() - 1)) ); // no need to catch dec -> jan for the year
+				d = current.setFullYear( current.getFullYear() - 1 );
+			}
+			else
+				d -= 604800000; // -7 days
+		}
+		else if (kc == Event.KEY_DOWN) 
+		{
+			if(ev.ctrlKey || ev.shiftKey) // +1 year
+			{
+				current.setDate( Math.min(current.getDate(), getDaysPerMonth(current.getMonth(),current.getFullYear() + 1)) ); // no need to catch dec -> jan for the year
+				d = current.setFullYear( current.getFullYear() + 1 );
+			}
+			else 
+				d += 7 * 24 * 61 * 60 * 1000; // +7 days
+		}
+		this.setSelectedDate(d);
+		Event.stop(ev);	
 	},
 	
 	selectDate : function(ev)
@@ -398,7 +337,7 @@ Prado.Calendar.prototype =
 		if (el == null || el.tagName == null || el.tagName.toLowerCase() != "td")
 			return;
 			
-		var d = new Date(this.currentDate);
+		var d = this.newDate(this.selectedDate);
 		var n = Number(el.firstChild.data);
 		if (isNaN(n) || n <= 0 || n == null)
 			return;
@@ -410,15 +349,13 @@ Prado.Calendar.prototype =
 	
 	selectToday : function()
 	{
-		this.setSelectedDate(new Date());
+		this.setSelectedDate(this.newDate());
 		this.hide();
 	},
 	
 	clearSelection : function()
 	{
-		this.selectedDate = null;
-		if (isFunction(this.onchange))
-			this.onchange();
+		this.setSelectedDate(this.newDate());
 		this.hide();
 	},
 	
@@ -437,10 +374,9 @@ Prado.Calendar.prototype =
 	{
 		if (e == null) e = document.parentWindow.event;
 		var n = - e.wheelDelta / 120;
-		var d = new Date(this.currentDate);
+		var d = this.newDate(this.selectedDate);
 		var m = d.getMonth() + n;
 		this.setMonth(m);
-		//this.setCurrentDate(d);
 			
 		return false;
 	},
@@ -452,36 +388,26 @@ Prado.Calendar.prototype =
 	
 	formatDate : function()
 	{
-		return this.selectedDate.SimpleFormat(this.format);
+		return this.selectedDate ? this.selectedDate.SimpleFormat(this.Format) : '';
 	},
 
-	setCurrentDate : function(date) 
+	newDate : function(date)
 	{
-		if (date == null)
-			return;
-
-		// if string or number create a Date object
-		if (isString(date)  || isNumber(date))
+		if(!date)
+			date = new Date();
+		if(isString(date)  || isNumber(date))
 			date = new Date(date);
-	
-		// do not update if not really changed
-		if (this.currentDate.getDate() != date.getDate() ||
-			this.currentDate.getMonth() != date.getMonth() || 
-			this.currentDate.getFullYear() != date.getFullYear()) 
-		{
-		
-			this.currentDate = new Date(date);
-	
-			this.updateHeader();
-			this.update();
-		}
-	
+		return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0,0,0);
 	},
-	
+
 	setSelectedDate : function(date) 
 	{
-		this.selectedDate = new Date(date);
-		this.setCurrentDate(this.selectedDate);
+		if (date == null)
+			return;
+		this.selectedDate = this.newDate(date);
+	
+		this.updateHeader();
+		this.update();
 		if (isFunction(this.onchange))
 			this.onchange();
 	},
@@ -493,31 +419,31 @@ Prado.Calendar.prototype =
 
 	getSelectedDate : function () 
 	{
-		return isNull(this.selectedDate) ? null : new Date(this.selectedDate);
+		return isNull(this.selectedDate) ? null : this.newDate(this.selectedDate);
 	},
 	
 	setYear : function(year) 
 	{
-		var d = new Date(this.currentDate);
+		var d = this.newDate(this.selectedDate);
 		d.setFullYear(year);
-		this.setCurrentDate(d);
+		this.setSelectedDate(d);
 	},
 
 	setMonth : function (month) 
 	{
-		var d = new Date(this.currentDate);
+		var d = this.newDate(this.selectedDate);
 		d.setMonth(month);
-		this.setCurrentDate(d);
+		this.setSelectedDate(d);
 	},
 
 	nextMonth : function () 
 	{
-		this.setMonth(this.currentDate.getMonth()+1);
+		this.setMonth(this.selectedDate.getMonth()+1);
 	},
 
 	prevMonth : function () 
 	{
-		this.setMonth(this.currentDate.getMonth()-1);
+		this.setMonth(this.selectedDate.getMonth()-1);
 	},
 	
 	show : function() 
@@ -527,15 +453,20 @@ Prado.Calendar.prototype =
 			var pos = Position.cumulativeOffset(this.control);
 			pos[1] += this.control.offsetHeight;
 			this._calDiv.style.display = "block";
-			this._calDiv.style.top = pos[1] + "px";
+			this._calDiv.style.top = (pos[1]-1) + "px";
 			this._calDiv.style.left = pos[0] + "px";
-			Event.observe(document.body, "click", this.hideOnClick.bind(this));
-			var date = Date.SimpleParse(Form.Element.getValue(this.control), this.format);
+			
+			this.ieHack(false);
+			this.documentClickEvent = this.hideOnClick.bindEvent(this);
+			this.documentKeyDownEvent = this.keyPressed.bindEvent(this);
+			Event.observe(document.body, "click", this.documentClickEvent);
+			var date = Date.SimpleParse(Form.Element.getValue(this.control), this.Format);
 			if(!isNull(date))
 			{
 				this.selectedDate = date;
-				this.setCurrentDate(date);
+				this.setSelectedDate(date);
 			}
+			Event.observe(document,"keydown", this.documentKeyDownEvent); 
 			this.showing = true;
 		}
 	},
@@ -548,7 +479,7 @@ Prado.Calendar.prototype =
 		var within = false;
 		do
 		{
-			within = within || el.className == this.className;
+			within = within || el.className == this.ClassName;
 			within = within || el == this.trigger;
 			within = within || el == this.control;
 			if(within) break;
@@ -563,27 +494,27 @@ Prado.Calendar.prototype =
 		if(this.showing)
 		{
 			this._calDiv.style.display = "none";
+			if(this.iePopUp)
+				this.iePopUp.style.display = "none";
 			this.showing = false;	
-			Event.stopObserving(document.body, "click", this.hideOnClick.bind(this));	
+			Event.stopObserving(document.body, "click", this.documentClickEvent);	
+			Event.stopObserving(document,"keydown", this.documentKeyDownEvent); 
 		}	
 	},
 	
 	update : function() 
 	{
-		var Util = Prado.Calendar.Util;
-
 		// Calculate the number of days in the month for the selected date
-		var date = this.currentDate;
-		var today = (new Date()).toISODate();
+		var date = this.selectedDate;
+		var today = (this.newDate()).toISODate();
 		
-		var selected = isNull(this.selectedDate) ? "" : this.selectedDate.toISODate();
-		var current = date.toISODate();
+		var selected = date.toISODate();
 		var d1 = new Date(date.getFullYear(), date.getMonth(), 1);
 		var d2 = new Date(date.getFullYear(), date.getMonth()+1, 1);
 		var monthLength = Math.round((d2 - d1) / (24 * 60 * 60 * 1000));
 		
 		// Find out the weekDay index for the first of this month
-		var firstIndex = (d1.getDay() - this.firstDayOfWeek) % 7 ;
+		var firstIndex = (d1.getDay() - this.FirstDayOfWeek) % 7 ;
 	    if (firstIndex < 0)
 	    	firstIndex += 7;
 		
@@ -601,13 +532,12 @@ Prado.Calendar.prototype =
 			slot.value = i;
 			slot.data.data = i;
 			slotNode.className = "date";
+			//slotNode.style.color = "";
 			if (d1.toISODate() == today) {
 				slotNode.className += " today";
 			}
-			if (d1.toISODate() == current) {
-				slotNode.className += " current";
-			}
 			if (d1.toISODate() == selected) {
+			//	slotNode.style.color = "blue";
 				slotNode.className += " selected";
 			}
 			d1 = new Date(d1.getFullYear(), d1.getMonth(), d1.getDate()+1);
@@ -633,7 +563,7 @@ Prado.Calendar.prototype =
 	updateHeader : function () {
 
 		var options = this._monthSelect.options;
-		var m = this.currentDate.getMonth();
+		var m = this.selectedDate.getMonth();
 		for(var i=0; i < options.length; ++i) {
 			options[i].selected = false;
 			if (options[i].value == m) {
@@ -642,7 +572,7 @@ Prado.Calendar.prototype =
 		}
 		
 		options = this._yearSelect.options;
-		var year = this.currentDate.getFullYear();
+		var year = this.selectedDate.getFullYear();
 		for(var i=0; i < options.length; ++i) {
 			options[i].selected = false;
 			if (options[i].value == year) {
diff --git a/framework/Web/Javascripts/prado/prado.js b/framework/Web/Javascripts/prado/prado.js
index 90ddbe8d..2cb422e1 100644
--- a/framework/Web/Javascripts/prado/prado.js
+++ b/framework/Web/Javascripts/prado/prado.js
@@ -1,2 +1,45 @@
-var Prado = { Version: '3.0a' };
+var Prado = 
+{ 
+	Version: '3.0a',
+	
+	Browser : function()
+	{
+		var info = { Version : "1.0" };
+		var is_major = parseInt( navigator.appVersion );
+		info.nver = is_major;
+		info.ver = navigator.appVersion;
+		info.agent = navigator.userAgent;
+		info.dom = document.getElementById ? 1 : 0;
+		info.opera = window.opera ? 1 : 0;
+		info.ie5 = ( info.ver.indexOf( "MSIE 5" ) > -1 && info.dom && !info.opera ) ? 1 : 0;
+		info.ie6 = ( info.ver.indexOf( "MSIE 6" ) > -1 && info.dom && !info.opera ) ? 1 : 0;
+		info.ie4 = ( document.all && !info.dom && !info.opera ) ? 1 : 0;
+		info.ie = info.ie4 || info.ie5 || info.ie6;
+		info.mac = info.agent.indexOf( "Mac" ) > -1;
+		info.ns6 = ( info.dom && parseInt( info.ver ) >= 5 ) ? 1 : 0;
+		info.ie3 = ( info.ver.indexOf( "MSIE" ) && ( is_major < 4 ) );
+		info.hotjava = ( info.agent.toLowerCase().indexOf( 'hotjava' ) != -1 ) ? 1 : 0;
+		info.ns4 = ( document.layers && !info.dom && !info.hotjava ) ? 1 : 0;
+		info.bw = ( info.ie6 || info.ie5 || info.ie4 || info.ns4 || info.ns6 || info.opera );
+		info.ver3 = ( info.hotjava || info.ie3 );
+		info.opera7 = ( ( info.agent.toLowerCase().indexOf( 'opera 7' ) > -1 ) || ( info.agent.toLowerCase().indexOf( 'opera/7' ) > -1 ) );
+		info.operaOld = info.opera && !info.opera7;
+		return info;
+	},
+	
+	ImportCss : function(doc, css_file) 
+	{
+		if (Prado.Browser().ie)
+			var styleSheet = doc.createStyleSheet(css_file);
+		else 
+		{
+			var elm = doc.createElement("link");
 
+			elm.rel = "stylesheet";
+			elm.href = css_file;
+
+			if (headArr = doc.getElementsByTagName("head"))
+				headArr[0].appendChild(elm);
+		}
+	}	
+};
diff --git a/framework/Web/Javascripts/prado/test.html b/framework/Web/Javascripts/prado/test.html
index ac690fa8..ab4ff973 100644
--- a/framework/Web/Javascripts/prado/test.html
+++ b/framework/Web/Javascripts/prado/test.html
@@ -4,61 +4,8 @@
 <head>
    <title>Prado Date Picker</title>
    <script type="text/javascript" src="../js/prado.js"></script>
+   <script type="text/javascript" src="../js/logger.js"></script>
    <script type="text/javascript" src="datepicker.js"></script>
-
-	<style>
-		.TDatePicker
-		{
-			border: 1px solid red;
-			position: absolute;
-			background-color: #ffe;
-			text-align: center;
-		}
-
-		.TDatePicker .hover 
-		{
-			background-color: #66FFFF;
-		}
-		.TDatePicker .today
-		{
-			font-weight: bold;
-		}
-		.TDatePicker .current
-		{
-			border: 1px solid blue;
-		}
-		.TDatePicker .empty
-		{
-			background-color: #ffe !important;
-		}
-		.TDatePicker .calendarHeader
-		{
-			
-		}
-		.TDatePicker .grid
-		{
-			
-		}
-		/*
-			.calendarHeader
-			.prevMonthButton
-			.labelContainer
-			.nextMonthButton
-			.calendarBody
-			.grid
-			.weekDayHead
-			.calendarDate
-			.calendarFooter
-			.footerTable
-			.todayButton
-			.clearButton
-			.date
-			.today
-			.current
-			.selected
-			.empty
-		*/
-	</style>
 </head>
 
 <body>
@@ -67,7 +14,11 @@
    <input type="button" name="button1" id="button1" value="..." />
    <br />
    <input type="text" /> <br />
-   <textarea></textarea>
+   <select><option value="1">One</option></select>
+
+   <input type="button" id="b1" value="button 1" />
+   <input type="button" id="start" value="start" />
+   <input type="button" id="stop" value="stop" />
 </form>
 
 
@@ -116,10 +67,39 @@ sd<br/>
 
 <script type="text/javascript">
      
-		var options = { "trigger" : "button1", "format" : "dd-MM-yyyy" };
-		var datepicker1 = new Prado.Calendar("textfield1", options);
-		var datepicker2 = new Prado.Calendar("textfield2");
+		var options = { "Trigger" : "button1", "Format" : "dd-MM-yyyy" };
+		var datepicker1 = new Prado.WebUI.TDatePicker("textfield1", options);
+		var datepicker2 = new Prado.WebUI.TDatePicker("textfield2", {'Format':'MM-dd-yy', 'UpToYear' : 2050});
+		var test2 = { clicks : 0 };
+		var test1 = Class.create();
+		test1.prototype = 
+		{
+			clicks : 0,
+			
+			initialize : function()
+			{
+				Event.observe("start", "click", this.start.bindEvent(this));
+				Event.observe("stop", "click", this.stop.bindEvent(this));
+			},
+
+			start : function()
+			{
+				this.button1ClickEvent = this.clicked.bindEvent(this);
+				Event.observe("b1", "click", this.button1ClickEvent);
+			},
+
+			stop : function()
+			{
+				Event.stopObserving("b1", "click", this.button1ClickEvent);
+			},
+
+			clicked : function()
+			{
+				Logger.warn("clicked " + (this.clicks++));
+			}
+		}
 
+		new test1();
    </script>
 </body>
 </html>
diff --git a/framework/Web/UI/TClientScriptManager.php b/framework/Web/UI/TClientScriptManager.php
index 72b4ce21..535e85b2 100644
--- a/framework/Web/UI/TClientScriptManager.php
+++ b/framework/Web/UI/TClientScriptManager.php
@@ -113,6 +113,7 @@ class TClientScriptManager extends TComponent
 	{
 		$options = $this->getPostBackOptions($control);
 		$type = get_class($control);
+		$namespace = empty($namespace) ? "window" : $namespace;
 		$code = "new {$namespace}.{$type}($options);";
 		$this->registerEndScript(sprintf('%08X', crc32($code)), $code);
 		
diff --git a/framework/Web/UI/WebControls/TDatePicker.php b/framework/Web/UI/WebControls/TDatePicker.php
new file mode 100644
index 00000000..a8fb363e
--- /dev/null
+++ b/framework/Web/UI/WebControls/TDatePicker.php
@@ -0,0 +1,244 @@
+<?php
+
+/**
+ * ${classname}
+ *
+ * ${description}
+ *
+ * @author Wei Zhuo<weizhuo[at]gmail[dot]com>
+ * @version $Revision: 1.66 $  $Date: ${DATE} ${TIME} $
+ * @package ${package}
+ */
+class TDatePicker extends TTextBox
+{
+	/**
+	 * @return string the format of the date string
+	 */
+	public function getDateFormat()
+	{
+		return $this->getViewState('DateFormat','dd-MM-yyyy');
+	}
+
+	/**
+	 * Sets the format of the date string.
+	 * @param string the format of the date string
+	 */
+	public function setDateFormat($value)
+	{
+		$this->setViewState('DateFormat',$value,'dd-MM-yyyy');
+	}
+
+	/**
+	 * @return boolean whether the calendar window should pop up when the control receives focus
+	 */
+	public function getShowCalendar()
+	{
+		return $this->getViewState('ShowCalendar',true);
+	}
+
+	/**
+	 * Sets whether to pop up the calendar window when the control receives focus
+	 * @param boolean whether to show the calendar window
+	 */
+	public function setShowCalendar($value)
+	{
+		$this->setViewState('ShowCalendar',TPropertyValue::ensureBoolean($value),true);
+	}
+	
+	/**
+	 * Gets the current culture.
+	 * @return string current culture, e.g. en_AU.
+	 */
+	public function getCulture()
+	{
+		return $this->getViewState('Culture', '');
+	}
+
+	/**
+	 * Sets the culture/language for the date picker.
+	 * @param string a culture string, e.g. en_AU.
+	 */
+	public function setCulture($value)
+	{
+		$this->setViewState('Culture', $value, '');
+	}
+
+	/**
+	 * @param string calendar UI mode, "Basic", "Button" or "Image"
+	 */
+	public function setMode($value)
+	{
+	   $this->setViewState('Mode', TPropertyValue::ensureEnum($value, 'Basic', 'Button', 'Image'), 'Basic');
+	}
+
+	/**
+	 * @return string current calendar UI mode.
+	 */
+	public function getMode()
+	{
+	   return $this->getViewState('Mode', 'Basic');
+	}
+	/**
+	 * @param string the image url for "Image" UI mode.
+	 */
+	public function setImageUrl($value)
+	{
+	   $this->setViewState('ImageUrl', $value, '');
+	}
+
+	/**
+	 * @return string the image url for "Image" UI mode.
+	 */
+	public function getImageUrl()
+	{
+	   return $this->getViewState('ImageUrl', '');
+	}
+
+	/**
+	 * @param string set the calendar style 
+	 */
+	public function setCalendarStyle($value)
+	{
+	   $this->setViewState('CalendarStyle', $value, 'datepicker_default');
+	}
+
+	/**
+	 * @return string current calendar styl
+	 */
+	public function getCalendarStyle()
+	{
+	   return $this->getViewState('CalendarStyle', 'datepicker_default');
+	}	
+
+	/**
+	 * Set the first day of week, with 0 as Sunday, 1 as Monday, etc.
+	 * @param integer 0 for Sunday, 1 for Monday, 2 for Tuesday, etc.
+	 */
+	public function setFirstDayOfWeek($value)
+	{
+		$this->setViewState('FirstDayOfWeek', TPropertyValue::ensureInteger($value), 1);
+	}
+
+	/**
+	 * @return integer first day of the week
+	 */
+	public function getFirstDayOfWeek()
+	{
+		return $this->getViewState('FirstDayOfWeek', 1);
+	}
+
+	public function getButtonText()
+	{
+		return $this->getViewState('ButtonText', '...');
+	}
+
+	public function setButtonText($value)
+	{
+		$this->setViewState('ButtonText', $value, '...');
+	}
+
+	/**
+	 * Sets the date picker starting year
+	 * @param integer starting year
+	 */
+	public function setFromYear($value)
+	{
+		$this->setViewState('FromYear', TPropertyValue::ensureInteger($value), 2000);
+	}
+
+	public function getFromYear()
+	{
+		return $this->getViewState('FromYear', 2000);
+	}
+
+	public function setUpToYear($value)
+	{
+		$this-setViewState('UpToYear', TPropertyValue::ensureInteger($value), 2015);
+	}
+
+	public function getUpToYear()
+	{
+		return $this->getViewState('UpToYear', 2015);
+	}
+
+	protected function getDatePickerOptions()
+	{
+		$options['Format'] = $this->getDateFormat();
+		$options['FirstDayOfWeek'] = $this->getFirstDayOfWeek();
+		$options['ClassName'] = $this->getCssClass();
+		$options['FromYear'] = $this->getFromYear();
+		$options['UpToYear'] = $this->getUpToYear();
+		if($this->getMode()!=='Basic')
+			$options['Trigger'] = $this->getDatePickerButtonID();
+		
+		return $options;
+	}
+
+	protected function OnPreRender($param)
+	{
+		parent::onPreRender($param);
+		$this->publishCalendarStyle();
+	}
+
+	/**
+	 * Renders body content.
+	 * This method overrides parent implementation by replacing
+	 * the body content with syntax highlighted result.
+	 * @param THtmlWriter writer
+	 */
+	protected function render($writer)
+	{
+		parent::render($writer);
+		switch ($this->getMode())
+		{
+			case 'Button': $this->renderButtonDatePicker($writer); break;
+			case 'Image' : $this->renderImageDatePicker($writer); break;
+		
+		}
+	}
+
+	protected function getDatePickerButtonID()
+	{
+		return $this->getClientID().'button';
+	}
+
+	protected function renderButtonDatePicker($writer)
+	{
+		$writer->addAttribute('id', $this->getDatePickerButtonID());		
+		$writer->addAttribute('type', 'button');
+		$writer->addAttribute('value',$this->getButtonText());
+		$writer->renderBeginTag("input");
+	}
+
+
+	protected function publishCalendarStyle()
+	{
+		$cs = $this->getPage()->getClientScript();
+		
+		$style = $this->getCalendarStyle();
+		$default = 'System.Web.Javascripts.prado.'.$style;
+		$stylesheet = preg_match('/\.|\//', $style) ? $style : $default;
+		
+		$cssFile=Prado::getPathOfNamespace($stylesheet,'.css');
+		if(!$cs->isStyleSheetFileRegistered($stylesheet))
+			$cs->registerStyleSheetFile($stylesheet, $this->getService()->getAsset($cssFile));
+	}
+
+	protected function addAttributesToRender($writer)
+	{
+		parent::addAttributesToRender($writer);
+		$writer->addAttribute('id',$this->getClientID());
+		if($this->getShowCalendar())
+		{
+			$scripts = $this->getPage()->getClientScript();
+			$scripts->registerClientScript("datepicker");
+			$serializer = new TJavascriptSerializer($this->getDatePickerOptions());
+			$options = $serializer->toJavascript();
+			$id = $this->getClientID();
+			$code = "new Prado.WebUI.TDatePicker('$id', $options);";
+			$scripts->registerEndScript("prado:$id", $code);
+		}
+	}
+}
+
+?>
\ No newline at end of file
diff --git a/tests/FunctionalTests/protected/pages/Layout.tpl b/tests/FunctionalTests/protected/pages/Layout.tpl
index 9a798b3c..8fd64429 100644
--- a/tests/FunctionalTests/protected/pages/Layout.tpl
+++ b/tests/FunctionalTests/protected/pages/Layout.tpl
@@ -3,7 +3,7 @@
 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 	
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<com:THead Title="PRADO QuickStart Tutorial">
+<com:THead Title="PRADO Functional Tests">
 	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
 	<style type="text/css">
 	/*<![CDATA[*/
-- 
cgit v1.2.3