1 /**
  2  * @author Gillis Haasnoot <gillis.haasnoot@gmail.com>
  3  * @package Banana.Controls
  4  * @summary Date picker. using jquery ui datapicker
  5  */
  6 
  7 goog.provide('Banana.Controls.DataControls.DatePicker');
  8 
  9 /** @namespace Banana.Controls.DatePicker */
 10 namespace('Banana.Controls').DatePicker = Banana.Controls.DataControl.extend(
 11 /** @lends Banana.Controls.DatePicker.prototype */
 12 { 
 13 	/**
 14 	 * Creates a Date picker
 15 	 * @constructs
 16 	 * @extends Banana.Controls.DataControl
 17 	 */
 18 	init : function()
 19 	{
 20 		this._super();
 21 		this.addCssClass('BDatePicker');
 22 		this.textBox = new Banana.Controls.TextBox().addCssClass('BDatePickerTextBox');	
 23 	},
 24 	
 25 	/**
 26 	 * @override
 27 	 */
 28 	createComponents : function()
 29 	{	
 30 		this.addControl(this.textBox);
 31 
 32 		this.textBox.bind('dataChanged',this.getProxy(function(){
 33 			
 34 			this.triggerEvent('dataChanged',this.textBox.getData());
 35 		}));
 36 			
 37 	},
 38 	
 39 	/**
 40 	 * Sets data on the datapicker control.
 41 	 * We can set data in timecode format or string format.
 42 	 * i.e setData(1000) //1 sec or setData("24-03-1931")
 43 	 * @param {mixed} data
 44 	 * @param {boolean} a
 45 	 * @param {boolean} b
 46 	 */
 47 	setData : function(data,ignoreEvent,ignoreDom)
 48 	{
 49 	
 50 		if (data == null)
 51 		{
 52 			this.textBox.setData(null);
 53 			return this;
 54 		}
 55 	
 56 		if (data == undefined) return this;
 57 		
 58 		if (!isNaN(data)) //we have a number
 59 		{
 60 			var tc = new Banana.Util.DateTimecode();
 61 			tc.setTimecode(data);
 62 			this.textBox.setData(tc.getLocalDate('%d-%m-%Y'),ignoreEvent,ignoreDom);
 63 		}
 64 		else
 65 		{
 66 			this.textBox.setData(data,ignoreEvent,ignoreDom);
 67 			
 68 			Banana.Util.DomHelper.setData("",this);
 69 		}
 70 		
 71 		return this;
 72 	},
 73 	
 74 	/**
 75 	 * Set a minimum selectable date via a Banana Date object @see Banana.Util.DateTimecode
 76 	 * @param {Banana.Util.DateTimecode} date
 77 	 * @return {this} 
 78 	 */
 79 	setMinimumDate : function(date)
 80 	{
 81 		//if rendered we instantly apply the new datepicker rule/option
 82 		if (this.isRendered)
 83 		{
 84 			jQuery('#'+this.textBox.clientId).datepicker("option", "minDate", new Date(date.getTimecode()));
 85 		}
 86 		else //otherwise save it in a variable. we will apply it later
 87 		{
 88 			this.minDate = date;
 89 		}
 90 		return this;
 91 	},
 92 	
 93 	/**
 94 	 * @param {String} type timecode or null
 95 	 * @return {this} this
 96 	 */
 97 	setReturnType : function(type)
 98 	{
 99 		this.returnType =type;
100 		return this;
101 	},
102 	
103 	/**
104 	 * @return {String} date
105 	 */
106 	getData : function()
107 	{
108 		var date = this.textBox.getData();
109 		
110 		if (this.returnType == 'timecode')
111 		{
112 			if (!date) return;
113 			var tc = new Banana.Util.DateTimecode();
114 			tc.setLocalDate(date);
115 			
116 			return tc.getTimecode().toString();
117 		}
118 		else
119 		{
120 			return date;
121 		}
122 	},
123 	
124 	/**
125 	 * method used by framework
126 	 * we destroy the datepicker here in case the window is still open
127 	 */
128 	unload : function()
129 	{
130 		//we cant directly go to this.textBox.getClientId(), cause at this stage
131 		//the id is changed to "cleared" by the framework
132 		jQuery('#'+this.textBox.clientId).datepicker("hide");
133 		jQuery('#'+this.textBox.clientId).datepicker("destroy");
134 
135 	},
136 
137 	/**
138 	 * method used by framework
139 	 * we create the datepicker element here
140 	 * @override
141 	 */
142 	updateDisplay : function()
143 	{
144 		this._super();
145 		jQuery('#'+this.textBox.getClientId()).datepicker(
146 		{ 
147 			dateFormat: 'dd-mm-yy',
148 			minDate:this.minDate ? new Date(this.minDate.getTimecode()) : new Date(0),
149 			//jQuery force the '1'  z-index value in the 'style' attribute of the ui-dialog-div
150 			// so our CSS value in css is overridden and the datepicker is still behind the other elements.
151 			//A workaround is to add the following lines 
152 			beforeShow: function(dateText, inst) {
153 				
154 				setTimeout(function(){
155 					jQuery('#ui-datepicker-div').css('z-index', '9999999');
156 					},200)			
157 			}
158 		});
159 	}	
160 });