[1240] | 1 | <?xml version="1.0" encoding="utf-8"?>
|
---|
| 2 | <mx:Canvas
|
---|
| 3 | xmlns:mx="http://www.adobe.com/2006/mxml"
|
---|
| 4 | xmlns:widget="gov.va.med.edp.widget.*"
|
---|
| 5 | width="195"
|
---|
| 6 | horizontalScrollPolicy="off" verticalScrollPolicy="off" tabChildren="true" focusEnabled="false" creationComplete="layoutControls()">
|
---|
| 7 |
|
---|
| 8 | <mx:Metadata>
|
---|
| 9 | [Event(name="change", type="mx.events.CalendarLayoutChangeEvent")]
|
---|
| 10 | [Event(name=DateTimeEvent.EVENT_DATE_TIME, type="gov.va.med.edp.control.DateTimeEvent")]
|
---|
| 11 | </mx:Metadata>
|
---|
| 12 |
|
---|
| 13 | <mx:Script>
|
---|
| 14 | <![CDATA[
|
---|
| 15 | import mx.events.CalendarLayoutChangeEvent;
|
---|
| 16 | import gov.va.med.edp.control.DateTimeEvent;
|
---|
| 17 | import gov.va.med.edp.control.DateTimeEvent;
|
---|
| 18 | import gov.va.med.edp.control.DateTimeEvent;
|
---|
| 19 | import mx.binding.utils.BindingUtils;
|
---|
| 20 | import gov.va.med.edp.control.DateTimeEvent;
|
---|
| 21 | import gov.va.med.edp.model.TrackingModelLocator;
|
---|
| 22 | import gov.va.med.edp.util.AccessibilityTools;
|
---|
| 23 |
|
---|
| 24 | [Bindable]
|
---|
| 25 | public var _selectedDate: Date;
|
---|
| 26 |
|
---|
| 27 | [Bindable]
|
---|
| 28 | private var _tabIndexBase:int = -1;
|
---|
| 29 |
|
---|
| 30 | [Bindable]
|
---|
| 31 | private var _dateType:String = "";
|
---|
| 32 |
|
---|
| 33 | [Bindable]
|
---|
| 34 | public function set selectedDate(date:Date):void
|
---|
| 35 | {
|
---|
| 36 | dateInput.text = "";
|
---|
| 37 | timeInput.text = "";
|
---|
| 38 | if (date != null){
|
---|
| 39 | dateChooser.selectedDate = date;
|
---|
| 40 | timeChooser.hour = date.getHours();
|
---|
| 41 | timeChooser.minute = date.getMinutes();
|
---|
| 42 | dateInput.text = dateFormatter.format(date);
|
---|
| 43 | timeInput.text = get2DigitTime(date.getHours().toString()) + ":" + get2DigitTime(date.getMinutes().toString());
|
---|
| 44 | } else {
|
---|
| 45 | dateChooser.selectedDate = null;
|
---|
| 46 | timeChooser.hour = 00;
|
---|
| 47 | timeChooser.minute = 00;
|
---|
| 48 | }
|
---|
| 49 | }
|
---|
| 50 | public function get selectedDate():Date
|
---|
| 51 | {
|
---|
| 52 | return this._selectedDate;
|
---|
| 53 | }
|
---|
| 54 |
|
---|
| 55 | private function get2DigitTime(time:String):String {
|
---|
| 56 | if (time.length == 1) return "0" + time;
|
---|
| 57 | return time;
|
---|
| 58 | }
|
---|
| 59 |
|
---|
| 60 | private function layoutControls():void {
|
---|
| 61 | if (AccessibilityTools.isAccessibilityActive()){
|
---|
| 62 | textControlsBox.visible = true;
|
---|
| 63 | calendarControlsBox.visible = false;
|
---|
| 64 | } else {
|
---|
| 65 | textControlsBox.visible = false;
|
---|
| 66 | calendarControlsBox.visible = true;
|
---|
| 67 | }
|
---|
| 68 | }
|
---|
| 69 |
|
---|
| 70 | private function fireEventFromCalendarControls(event: Event): void
|
---|
| 71 | {
|
---|
| 72 | if (dateChooser.selectedDate == null){
|
---|
| 73 | this._selectedDate = null;
|
---|
| 74 | return;
|
---|
| 75 | }
|
---|
| 76 |
|
---|
| 77 | var hours:int = timeChooser.hour;
|
---|
| 78 | var minutes:int = timeChooser.minute;
|
---|
| 79 | var year:int = dateChooser.selectedDate.fullYear;
|
---|
| 80 | var month:int = dateChooser.selectedDate.month;
|
---|
| 81 | var date:int = dateChooser.selectedDate.date;
|
---|
| 82 |
|
---|
| 83 | var dateTime:Date = new Date(year,month, date,hours,minutes);
|
---|
| 84 | this._selectedDate = dateTime;
|
---|
| 85 |
|
---|
| 86 | var dateTimeEvent:DateTimeEvent = new DateTimeEvent(DateTimeEvent.EVENT_DATE_TIME);
|
---|
| 87 | dateTimeEvent.dateTime = dateTime;
|
---|
| 88 | dispatchEvent(dateTimeEvent);
|
---|
| 89 |
|
---|
| 90 | var chgEvent: CalendarLayoutChangeEvent =
|
---|
| 91 | new CalendarLayoutChangeEvent(CalendarLayoutChangeEvent.CHANGE);
|
---|
| 92 | chgEvent.newDate = dateTime;
|
---|
| 93 | dispatchEvent(chgEvent);
|
---|
| 94 | }
|
---|
| 95 |
|
---|
| 96 | private function fireEventFromTextControls(event: Event): void
|
---|
| 97 | {
|
---|
| 98 | var isValid:Boolean = false;
|
---|
| 99 |
|
---|
| 100 | if (event.currentTarget.id == "dateInput"){
|
---|
| 101 | isValid = isDateValid(dateInput.text);
|
---|
| 102 | }
|
---|
| 103 |
|
---|
| 104 | if (event.currentTarget.id == "timeInput"){
|
---|
| 105 | isValid = isTimeValid(timeInput.text);
|
---|
| 106 | }
|
---|
| 107 |
|
---|
| 108 | if (!isValid){
|
---|
| 109 | this._selectedDate = null;
|
---|
| 110 | return;
|
---|
| 111 | }
|
---|
| 112 |
|
---|
| 113 | var date:Array = dateInput.text.split("/");
|
---|
| 114 | var time:Array = timeInput.text.split(":");
|
---|
| 115 | var hours:int = parseInt(time[0]);
|
---|
| 116 | var minutes:int = parseInt(time[1]);
|
---|
| 117 | //var year:int = parseInt(date[2]);
|
---|
| 118 | var year:int = formatYear(date[2]);
|
---|
| 119 | var month:int = parseInt(date[0]);
|
---|
| 120 | var day:int = parseInt(date[1]);
|
---|
| 121 | var dateTime:Date = new Date(year,month-1,day,hours,minutes);
|
---|
| 122 |
|
---|
| 123 | this._selectedDate = dateTime;
|
---|
| 124 | dateInput.text = DateField.dateToString(dateTime, "MM/DD/YYYY");
|
---|
| 125 |
|
---|
| 126 | var dateTimeEvent:DateTimeEvent = new DateTimeEvent(DateTimeEvent.EVENT_DATE_TIME);
|
---|
| 127 | dateTimeEvent.dateTime = dateTime;
|
---|
| 128 | dispatchEvent(dateTimeEvent);
|
---|
| 129 |
|
---|
| 130 | var chgEvent: CalendarLayoutChangeEvent =
|
---|
| 131 | new CalendarLayoutChangeEvent(CalendarLayoutChangeEvent.CHANGE);
|
---|
| 132 | chgEvent.newDate = dateTime;
|
---|
| 133 | dispatchEvent(chgEvent);
|
---|
| 134 |
|
---|
| 135 | }
|
---|
| 136 |
|
---|
| 137 | // added by jtorreno 08/17/2008
|
---|
| 138 | // formats year according to the length of the string and its value
|
---|
| 139 | // Formatting is based on the autoformatting algorithm of the datechooser field in flex
|
---|
| 140 | // This is implemented if accessibility is enabled
|
---|
| 141 | private function formatYear(yearStr: String): int
|
---|
| 142 | {
|
---|
| 143 | var newYear:int = 1900;
|
---|
| 144 | var yearLen:int = 0;
|
---|
| 145 | var year:int = 0;
|
---|
| 146 |
|
---|
| 147 | if (yearStr != null)
|
---|
| 148 | {
|
---|
| 149 | yearLen = yearStr.length;
|
---|
| 150 | year = parseInt(yearStr);
|
---|
| 151 | }
|
---|
| 152 |
|
---|
| 153 | if ((yearLen > 0) && (yearLen <=3))
|
---|
| 154 | {
|
---|
| 155 | if ((year > 0) && (year < 70) && (yearLen == 2))
|
---|
| 156 | {
|
---|
| 157 | newYear = year + 2000;
|
---|
| 158 | } else {
|
---|
| 159 | if (((year >= 70) && (year <= 99) && (yearLen == 1)) ||
|
---|
| 160 | ((year <= 99) && (yearLen == 3)))
|
---|
| 161 | {
|
---|
| 162 | newYear = year + 1900;
|
---|
| 163 | } else {
|
---|
| 164 | newYear = year;
|
---|
| 165 | }
|
---|
| 166 | }
|
---|
| 167 | } else {
|
---|
| 168 | newYear = year;
|
---|
| 169 | }
|
---|
| 170 |
|
---|
| 171 | return newYear
|
---|
| 172 | }
|
---|
| 173 |
|
---|
| 174 | // modified by jtorreno 8/17/2008
|
---|
| 175 | // changed some rules to allow date formatting
|
---|
| 176 | private function isDateValid(dateString: String): Boolean
|
---|
| 177 | {
|
---|
| 178 | var isValid:Boolean = false;
|
---|
| 179 |
|
---|
| 180 | // minimum and maximum length of string that can be entered
|
---|
| 181 | if ((dateString.length >= 5) && (dateString.length <= 10))
|
---|
| 182 | {
|
---|
| 183 | var date:Array = dateString.split("/");
|
---|
| 184 | // checks if array is composed of 3 fields ( Month, Day , Year)
|
---|
| 185 | if (date.length == 3)
|
---|
| 186 | {
|
---|
| 187 | var monthStr:String = date[0];
|
---|
| 188 | var dayStr:String = date[1];
|
---|
| 189 | var yearStr:String = date[2];
|
---|
| 190 |
|
---|
| 191 | // checks string length of month, day, year for validity
|
---|
| 192 | if ((monthStr.length > 0) && (monthStr.length <= 2)
|
---|
| 193 | && (dayStr.length > 0) && (dayStr.length <= 2)
|
---|
| 194 | && (yearStr.length > 0) && (yearStr.length <= 4))
|
---|
| 195 | {
|
---|
| 196 | var year:Number = parseInt(yearStr);
|
---|
| 197 | var month:Number = parseInt(monthStr);
|
---|
| 198 | var day:Number = parseInt(dayStr);
|
---|
| 199 |
|
---|
| 200 | if (isNaN(year) || isNaN(month) || isNaN(day)){
|
---|
| 201 | isValid = false;
|
---|
| 202 | } else
|
---|
| 203 | {
|
---|
| 204 | if (month > 0 && month < 13){
|
---|
| 205 | if (day > 0 && day < 32){
|
---|
| 206 | isValid = true;
|
---|
| 207 | }
|
---|
| 208 | }
|
---|
| 209 | }
|
---|
| 210 | }
|
---|
| 211 | }
|
---|
| 212 | }
|
---|
| 213 |
|
---|
| 214 | return isValid;
|
---|
| 215 | }
|
---|
| 216 |
|
---|
| 217 | //added by jtorreno 08/17/2008
|
---|
| 218 | // resets time text if it is left blank
|
---|
| 219 | private function resetTimeText(event:Event):void
|
---|
| 220 | {
|
---|
| 221 | if (event.currentTarget.id == "timeInput"){
|
---|
| 222 | if ((timeInput.text == null) || (timeInput.text.length == 0))
|
---|
| 223 | {
|
---|
| 224 | timeInput.text = "00:00"
|
---|
| 225 | }
|
---|
| 226 |
|
---|
| 227 | }
|
---|
| 228 | }
|
---|
| 229 |
|
---|
| 230 | private function isTimeValid(timeString: String): Boolean
|
---|
| 231 | {
|
---|
| 232 | var isValid:Boolean = false;
|
---|
| 233 | if (timeString.length == 5){
|
---|
| 234 | var time:Array = timeString.split(":");
|
---|
| 235 | var hourStr:String = time[0];
|
---|
| 236 | var minStr:String = time[1];
|
---|
| 237 | if (hourStr.length == 2 && minStr.length == 2){
|
---|
| 238 | var hour:Number = parseInt(hourStr);
|
---|
| 239 | var min:Number = parseInt(minStr);
|
---|
| 240 | if (isNaN(hour) || isNaN(min)){
|
---|
| 241 | isValid = false;
|
---|
| 242 | } else {
|
---|
| 243 | if (hour > -1 && hour < 24){
|
---|
| 244 | if (min > -1 && min < 60){
|
---|
| 245 | isValid = true;
|
---|
| 246 | }
|
---|
| 247 | }
|
---|
| 248 | }
|
---|
| 249 | }
|
---|
| 250 | }
|
---|
| 251 | return isValid;
|
---|
| 252 | }
|
---|
| 253 |
|
---|
| 254 | private function setAccessibilityPropertiesForDateInput(): void {
|
---|
| 255 | AccessibilityTools.accessComponentName(dateInput, "Date");
|
---|
| 256 | AccessibilityTools.accessComponentDescription(dateInput, "Enter " + _dateType + "date as MM/DD/YYYY.");
|
---|
| 257 |
|
---|
| 258 | }
|
---|
| 259 |
|
---|
| 260 | private function setAccessibilityPropertiesForTimeInput(): void {
|
---|
| 261 | AccessibilityTools.accessComponentName(timeInput,"Time");
|
---|
| 262 | AccessibilityTools.accessComponentDescription(timeInput,"Enter " + _dateType + "time in military time format as HH:MM");
|
---|
| 263 | }
|
---|
| 264 |
|
---|
| 265 | public function set tabIndexBase(value:int):void {
|
---|
| 266 | _tabIndexBase = value;
|
---|
| 267 | }
|
---|
| 268 |
|
---|
| 269 | public function get tabIndexBase():int {
|
---|
| 270 | return _tabIndexBase;
|
---|
| 271 | }
|
---|
| 272 |
|
---|
| 273 | public function set dateType(value:String):void {
|
---|
| 274 | _dateType = value;
|
---|
| 275 | }
|
---|
| 276 |
|
---|
| 277 | public function get dateType():String {
|
---|
| 278 | return _dateType;
|
---|
| 279 | }
|
---|
| 280 | ]]>
|
---|
| 281 |
|
---|
| 282 | </mx:Script>
|
---|
| 283 |
|
---|
| 284 |
|
---|
| 285 | <mx:HBox id="calendarControlsBox" width="100%" height="100%" x="0" y="0" visible="true">
|
---|
| 286 | <mx:DateField
|
---|
| 287 | id="dateChooser"
|
---|
| 288 | initialize="{AccessibilityTools.accessComponentName(dateChooser,'Date Chooser')}"
|
---|
| 289 | yearNavigationEnabled="true"
|
---|
| 290 | editable="{AccessibilityTools.setToFalseIfAccessToolIsActive()}"
|
---|
| 291 | change="{fireEventFromCalendarControls(event)}"
|
---|
| 292 | width="110"
|
---|
| 293 | tabIndex="{_tabIndexBase}"/>
|
---|
| 294 | <widget:TimeEntry
|
---|
| 295 | id="timeChooser"
|
---|
| 296 | initialize="{AccessibilityTools.accessComponentName(timeChooser,'Time Chooser')}"
|
---|
| 297 | showSeconds="false"
|
---|
| 298 | is24Hour="true"
|
---|
| 299 | backgroundColor="white"
|
---|
| 300 | borderThickness="1"
|
---|
| 301 | borderStyle="solid"
|
---|
| 302 | cornerRadius="5"
|
---|
| 303 | keyDown="{fireEventFromCalendarControls(event)}"
|
---|
| 304 | click="{fireEventFromCalendarControls(event)}"
|
---|
| 305 | tabIndexBase="{_tabIndexBase + 1}"/>
|
---|
| 306 | </mx:HBox>
|
---|
| 307 |
|
---|
| 308 | <mx:HBox id="textControlsBox" width="100%" height="100%" x="0" y="0">
|
---|
| 309 | <mx:TextInput id="dateInput"
|
---|
| 310 | restrict="0123456789/"
|
---|
| 311 | toolTip="date (MM/DD/YYYY)"
|
---|
| 312 | tabIndex="{_tabIndexBase}"
|
---|
| 313 | focusOut="fireEventFromTextControls(event)"
|
---|
| 314 | initialize="setAccessibilityPropertiesForDateInput()"
|
---|
| 315 | width="90"/>
|
---|
| 316 | <mx:TextInput id="timeInput"
|
---|
| 317 | text="00:00"
|
---|
| 318 | toolTip="time (HH:MM)"
|
---|
| 319 | restrict="0123456789:"
|
---|
| 320 | tabIndex="{_tabIndexBase + 1}"
|
---|
| 321 | change="fireEventFromTextControls(event)"
|
---|
| 322 | initialize="setAccessibilityPropertiesForTimeInput()"
|
---|
| 323 | width="60"/>
|
---|
| 324 | </mx:HBox>
|
---|
| 325 |
|
---|
| 326 | <mx:DateValidator source="{dateChooser}" property="text" required="true" />
|
---|
| 327 | <mx:DateValidator source="{dateInput}" property="text" required="true" />
|
---|
| 328 | <mx:StringValidator source="{timeInput}" property="text" required="true" />
|
---|
| 329 | <mx:DateFormatter id="dateFormatter" formatString="MM/DD/YYYY" />
|
---|
| 330 | </mx:Canvas>
|
---|