Get more control over the Flex DateField component

I really messed up with the standard Flex DateField component trying to get rid of this annoying text field left to the date icon. In my opinion Flex gives you too less control over all of the in a DateField included components. There is no attribute or style available to hide the TextInput field.

But fortunately it’s very easy to extend Flex components. For a project I was working I pragmatically turned off the visibility of the input field by making the TextInput field child object accessible to the outer world by adding a getter and a setter method for the ComboBase textField class property. This gives us full control over the input field. Instead of just turning visibility off you can of change other properties as the width or height.

The actionscript extension class (DateChooserPopup.as)

package customComponents

{

import mx.controls.DateField;

import mx.controls.TextInput;

public class DateChooserPopup extends DateField

{

public function DateChooserPopup()

{

super();

}

public function set TextInputField( textInput:TextInput ):void {

this.textInput = textInput;

}

public function get TextInputField():TextInput {

return this.textInput;

}

}

}

Now we use the new component within the MXML main file:

<?xml version=“1.0″ encoding=“utf-8″?>

<mx:Application xmlns:mx=“http://www.adobe.com/2006/mxml“ width=“640“ height=“445“ layout=“absolute“ backgroundGradientColors=“[#FFFFFF, #FFFFFF]“ xmlns:CUSTComp=“customComponents.*„>