Mar 21, 2007 - User-Friendly Time Entry Sample
Making it easy for the user to enter time in the proper format without the need for error checking.

Have you ever had the need for data to be in a specific format, but your users got annoyed by those little error messages that state they entered it wrong? Well, the great thing about Flex is you can avoid all that.

Working with time components and formatting can be cumbersome, especially if your application needs the ‘time’ data to be in a very specific format. How do you get users to input the proper format the first time without having to keep telling them that they entered it the wrong way?

Here is a very simple component that takes a string representing a specific time and breaks it up into time pieces. It can also take the pieces and put them together to represent the full time format. 

I created this component out of need.  The application was grabbing the data from an HTTPService, and the data was coming in as a string. The user needed to view the time and modify it. The application then needed to store the time as a string in the same format that it originally came from. 

I could have used the ActionScript3 Date Class, but that seemed too complicated for what I really needed to do.  I would have been converting data from string to date and back to string, and I only needed the time component.

Here is the TimeStringUtil.as component:

package com {         public class TimeStringUtil {             //Format:  hh:mm am/pm or h:mm am/pm             //This time format is assumed throughout this component, but can be modified by updating the following             //lines of code that pull the indexOf.                         public static function getHour( tStr:String ):String{                   var hour:String;                   if( tStr == "" || tStr == null ) {                         //Check for an empty string                         hour = "";                   } else {                         var idx:int = tStr.indexOf(":");                         hour = tStr.substr(0, idx);                   }                   return hour;             }                         public static function getMinute( tStr:String ):String {                   var min:String;                   if( tStr == "" || tStr == null ) {                         min = "";                   } else {                         min = tStr.substr(tStr.indexOf(":"), 2);                   }                   return min;             }                         // get AM/PM portion             public static function getMeridien( tStr:String ):String {                   var ampm:String;                   if( tStr == "" || tStr == null ) {                         ampm = "";                   } else {                         ampm = tStr.substr( -2, 2 );                   }                   return ampm;             }                         public static function setFullTime( hour:String, min:String, ampm:String ):String {                   if( min.length == 1 ) {                         min = "0" + min;                   }                   var tStr:String = hour + ":" + min + " " + ampm;                   return tStr;             }       } }

Here is a sample application that uses the component:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" creationComplete="defaultValue='5:00 PM'">         <mx:Metadata>         [Event(name="timeChanged", type="flash.events.Event")]       </mx:Metadata>             <mx:Script>             <![CDATA[                   import com.TimeStringUtil;                                     [Bindable] private var ampmLabels:Array = new Array("AM","PM");                   [Bindable] private var fullTime:String;                                                       //You can set the default value from your parentDocument                   public function set defaultValue(src:String):void {                         this.hour = TimeStringUtil.getHour(src);                         this.minute = TimeStringUtil.getMinute(src);                         this.ampm = TimeStringUtil.getMeridien(src);                         hourvalue.value = Number(this.hour);                         minvalue.value = Number(this.minute);                         ampmvalue.selectedItem = this.ampm;                         fullTime = src;                   }                                     [Bindable]                   public function get hour():String {                         var _hour:String = "0";                         if( hourvalue != null ) {                               _hour = hourvalue.value.toString();                               /*if( _hour == "NaN" || _hour == "0" ) {                                     _hour = "1";                               }*/                         }                         return _hour;                   }                   public function set hour( src:String ):void {                         hourvalue.value = Number(src);                   }                                     [Bindable]                   public function get minute():String {                         var _min:String;                         if( minvalue != null ) {                               _min = minvalue.value.toString();                               /*if( _min == "NaN" ) {                                     _min = "0";                               }*/                         }                         return _min;                   }                                   public function set minute( src:String ):void {                         minvalue.value = Number(src);                   }                                     [Bindable]                   public function get ampm():String {                         var _ampm:String;                         if( ampmvalue != null ) {                               _ampm = ampmvalue.selectedItem.toString();                         }                         return _ampm;                   }                   public function set ampm( src:String ):void {                         ampmvalue.selectedItem = src;                   }                                     public function resetTimeText():void {                         //hour, minute, and ampm are taken from the getter/setters above                         fullTime = TimeStringUtil.setFullTime(hour, minute, ampm);                         dispatchEvent(new Event("timeChanged"));                   }             ]]>       </mx:Script>       <mx:Text id="timeText" fontWeight="bold" fontSize="20" text="{fullTime}"/>       <mx:Form>             <mx:FormItem label="Enter Hour">                   <mx:NumericStepper id="hourvalue" minimum="1" maximum="12" change="resetTimeText()" toolTip="Select hour"/>                  </mx:FormItem>             <mx:FormItem label="Enter Minute">                   <mx:NumericStepper id="minvalue" minimum="0" maximum="59" change="resetTimeText()" toolTip="Select minute"/>                </mx:FormItem>             <mx:FormItem label="Enter Meridien (AM/PM)">                   <mx:ComboBox id="ampmvalue" dataProvider="{ampmLabels}" dropdownWidth="40" width="60" change="resetTimeText()"/>                </mx:FormItem>                   </mx:Form> </mx:Application>