The following example shows how you can set the border color on a Flex DateField control by setting the borderColor style using MXML, CSS, and ActionScript.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/12/setting-the-border-color-on-a-datefield-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="top"
backgroundColor="white">
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="borderColor:">
<mx:ColorPicker id="colorPicker" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:DateField id="dateField"
borderColor="{colorPicker.selectedColor}" />
</mx:Application>
View source is enabled in the following example.
You can also set the borderColor style in an external .CSS file or <mx:Style /> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/12/setting-the-border-color-on-a-datefield-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="top"
backgroundColor="white">
<mx:Style>
DateField {
borderColor: haloOrange;
}
</mx:Style>
<mx:DateField id="red" />
</mx:Application>
Or, you can set the borderColor style using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/12/setting-the-border-color-on-a-datefield-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="top"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.events.ColorPickerEvent;
private function colorPicker_change(evt:ColorPickerEvent):void {
dateField.setStyle("borderColor", evt.color);
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="borderColor:">
<mx:ColorPicker id="colorPicker"
change="colorPicker_change(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:DateField id="dateField" />
</mx:Application>



Hi,
Nice blog.
I want help in to things.
a) Can we add close icon to the DateChooser of DataField? When user select date the DateChooser should not close automatically, instead we want user to explictly close it.
b) If I set the border color same as background color (to acheive no border effect), it still display a black line on the top of text field. How can I get rid of it?
Thanks,
Gurpreet Singh