Adobe Flex – Enhanced DateField

Today, I ran into a small issue with the default DateField in Adobe Flex 2.0.1 (which also seemed to be an issue in Flex 3 MS3B2).  The issue was simply that I could not manually enter my date into the text field and was forced to select it from the PopUp DateChooser.  Normally, this wouldn’t be a problem … but when trying to select a date that is several years in the past or future, makes it quite hard. So, I took it upon myself to whip together this little component to use in my project.

It’s still fairly new, but is entirely usable. Some things that are missing are validation and date ‘string’ formats.  Currently, the code requires the date to be entered in ‘mm/dd/yyyy’ format.  Although, it does accept ‘mm/dd/yy’ (assuming the first two ‘yy’ values are that of the current year).

So, here’s the code … feel free to use it as you like.

com.zoulcreations.flex.controls.DateField source:

[xml]
< ?xml version="1.0" encoding="utf-8"?>

		< ![CDATA[
			import mx.managers.PopUpManager;
			import mx.controls.DateChooser;
			import mx.controls.Alert;

			[Bindable] public var selectedDate:Date;
			public var showToday:Boolean = false;

			[Embed(source="C:/Program Files/Adobe/Flex Builder 3/sdks/2.0.1/frameworks/source/mx/controls/DateChooser.png")]
			[Bindable] private var chooserIcon:Class;

			private function onCreation():void
			{
				if(showToday)
				{
					selectedDate = new Date();
				}
			}
			private function textChanged(event:Event):void
			{
				var dp:Array = ti.text.split('/');
				if(dp.length == 3)
				{
					try
					{
						var m:int = int(dp[0]);
						var d:int = int(dp[1]);
						var ys:String = dp[2];
						var y:int = 1900;
						if(ys.length == 4)
						{
							y = int(ys);
						}
						else if(ys.length == 2)
						{
							y = int( (new Date()).fullYear.toString().substr(0,2) + ys);
						}

						var dt:Date = new Date(y,m-1,d);
						selectedDate = dt;
					} catch(err:Error) { Alert.show(err.message, "Date Format Error"); }
				}
			}

			private function chooserChanged(event:Event):void
			{
				selectedDate = dc.selectedDate;
				//ti.text = formatDate(selectedDate);

				hideChooser();
			}

			private function formatDate(dt:Date):String
			{
				var m:int = dt.month;
				var d:int = dt.date;
				var y:int = dt.fullYear;
				return (m + 1) + '/' + d + '/' + y;
			}

			private var dc:DateChooser = null;
			private function imgClicked(event:Event):void
			{
				img.setFocus();
				if(dc == null) { showChooser(); }
				else { hideChooser(); }
			}

			private function showChooser():void
			{
				if(dc == null)
				{
					dc = new DateChooser();
					dc.selectedDate = selectedDate;
					dc.addEventListener("change", chooserChanged);
					PopUpManager.addPopUp(dc, this, false, null);
					dc.y = this.y + this.height + 4;
					dc.x = (this.x + this.width) - dc.width;
				}
			}

			private function hideChooser():void
			{
				if(dc != null)
				{
					PopUpManager.removePopUp(dc);
					dc = null;
				}
			}
		]]>

[/xml]

2 comments for “Adobe Flex – Enhanced DateField

  1. Peter
    July 25, 2008 at 2:34 pm

    Any reason you couldn’t just set editable to true?

  2. July 26, 2008 at 3:35 pm

    To be honest, I’m not sure — the post pretty much explains the problem I ran into, and the reason for writing this code.

    I haven’t worked with Flex for a few months now, and never really looked into this issue much more then what you see here in the post.

    Would setting the edittable attribute to true allow for the same functionality provided by this custom control? The goal was to have a DateField which allowed me to enter the date in text format directly into the textbox, rather then requiring me to select it from the pop out Calendar control.

Leave a Reply