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 });