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.
public class CustomDateField extends DateField
public function CustomDateField()
* 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
override protected function measure():void
// 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;