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>
|
---|