Flex DateField TextInput Alignment Problem

I ran into a couple of problems with the DateField when I added a custom formatted date and removal of the border for the text input. I may have overlooked something here so if someone can suggest a more appropriate solution it would be welcomed.

(a) Text shifted up losing its central vertical alignment. (b) The calendar icon did not move horizontally as the text input data changed.

[caption id=”attachment_638” align=”left” width=”172” caption=”DateField Problems”][/caption]

Here is my solution:

public class CustomDateField extends DateField
{
  public function CustomDateField()
  {
      super();
  }
      
  /**
    *  Override the measure method to adjust the textinput according
    *  to text line metric measurements.  Add a 30px padding to 
    *  accomodate the calender icon.  
    *  When the border of the textinput field is set to none then the
    *  text shifts up vertically and therefore loses its center 
    *  alignment.  I added a small calculation to realign to center.
    *  
    *     You will need to extend below logic to accomodate icon width 
    *  changes; 
    */
    override protected function measure():void
     {
         super.measure();
          
         // Calculate the size of the textInput using the text within control
               var lineMetrics:TextLineMetrics = measureText( textInput.text );            
          
               var w:Number = lineMetrics.width + 30;
               var h:Number = lineMetrics.height + 10;
            
               // Set the textInput width and height
               textInput.setActualSize( w, h );
            
               var alignTop:Number = ( ( textInput.height / 2 ) - ( lineMetrics.height / 2 ) ) / 2;
        
               textInput.y = alignTop;    
               // Adjust the actual width according to the calculate w value
               measuredWidth = w;   
           }
}