Thursday, September 22, 2011

Customizing Flex3 DateField Control

Hi all,

I was working on a project and got requirement to customize the look n feel of DateField. At first i was very confident that i will be completing this in a minute bcoz i can skin this but sooner i realized that Flex4 doesn't have DateField i have to customize the flex3 date field i.e. MX control ;).

I took little time to complete it hence uploading the same for someone else which are facing the issues i faced.

Do comment/email me if you find it useful. Below is the list of features i added.

1) Previous dates are disabled
2) Font embeded
3) Arrow button i.e. next prev button movement.
4) Separate style for Day headers & Days
5) Top header style
6) Calendar Icon on date field
7) Prompt text can be used to show date format. or any info u like.

Following Classes are there in the project -
- DateFieldDemo.mxml
- DateField.as
- DateChooser.as
- DateLeftButtonSkin.mxml
- DateRightButtonSkin.mxml
- calendarIcon.png
- dateLeftArrow.png
- dateRightArrow.png
- DateStyle.css

Click here to download the flex project files.

Download link: https://docs.google.com/open?id=0BzTWRf5mpjgYNjAwNWZhNzktNjY5Yi00MDIyLWEyZmQtYmQxNjQyMWFjNWQw

Regards,
Ashok Kumar

Saturday, March 19, 2011