Extended DateField

Someone was asking on the FlexCoders list today about having a date field, where clicking into the TextInput side allowed the user to type in a date, but still allowing them to click the calendar icon to open the DateChooser.  While no component natively supports this, its pretty easy to cobble one together, which I just did. you can see it running here:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:DateField
 id="dateField"
 selectedDate="{_selectedDate}"
 change="setDateFromCal(event)"
 open="this.dispatchEvent(event)"
 close="this.dispatchEvent(event)"
 scroll="this.dispatchEvent(event)" />
<mx:TextInput
 id="input"
 text="{formatter.format(_selectedDate)}"
 width="{dateField.text_mc.width}"
 focusOut="setDateFromText(event)" />
<mx:DateFormatter id="formatter" />
<mx:Metadata>
 [Event("change")]
 [Event("open")]
 [Event("close")]
 [Event("scroll")]
</mx:Metadata>
<mx:Script>
<![CDATA[
 import mx.formatters.DateFormatter;
 var _selectedDate:Date;
 function set selectedDate(dt:Date){
  _selectedDate = dt;
 }
 function get selectedDate():Date{
  return _selectedDate;
 }
 function setDateFromText(event){
  dateField.selectedDate=DateFormatter.parseDateString(event.target.text);
  var e:Object = new Object();
  e.type = "change";
  this.dispatchEvent(e);
 }
 function setDateFromCal(event){
  _selectedDate=event.target.selectedDate;
  this.dispatchEvent(event)
 }

 function parseDate(formattedDate:String):Date{
  // for now, assuming mm/dd/yyyy
  var aDateParts:Array = formattedDate.split("/");
  var date:Date = new Date(aDateParts[2],Number(aDateParts[0])-1,aDateParts[1]);
  return date;
 }

]]>
</mx:Script>
</mx:Canvas>

When saved as DateTest.mxml, it can be tested like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application creationComplete="initApp()" xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns="*">
<DateTest id="dt" selectedDate="{today}" />
<mx:Script>
<![CDATA[
 var today:Date;
 function initApp(){
  today = new Date();
 }

]]>
</mx:Script>
</mx:Application>

While this is by no means complete, it does show how in just a few minutes new functionality can be introduced to existing components, which is a topic I’ll be discussing at the upcoming Powered By Detroit conference.

A more complete version would mirror the API available from the DateField, but this gives the base functionality in a pretty easy to understand fashion.  I’ve come back and added the four key events from the DateField to this, so it will now broadcast change, open, close and scroll.

A bit more reworking, I found the DateFormatter has a static method to parse a date string, so no need for my parse date method.  In fact, the static method is far more effective than mine (mine required date be passed as mm/dd/yyyy), it will properly parse the date from a number of different strings, like:

• 6/23/2004
• 6-23-2004
• June 23, 2004
• Jun 23, 2004
• etc.

11/28/06 update -  As I was investigating implementing a similar solution for Flex 2, I found that the Flex 2 DateField component already has this built in, all you need to do is set editable="true"

<mx:DateField editable="true"/>