Share on Google+Share on Google+

Flex DateChooser with style and selectable and disable date

Advertisement
In this tutorial we can illustrate how to set Style for DateChooser in flex. And how to set selectable date and disable date in flex.

DateChooser with Style:-

In this tutorial you can see how to set Style for the DateChooser control in flex. The process is that, first of all you can create an application and then create DateChooser  with the help of <mx:DateChooser> tag after that you can create Style with the help of <mx:Style>tag for DateChooser Control. And also you can set selected rang of the date and disable rang of the date in DateChooser. you can see that process in this example.

Example:-

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Style>

.myHeaderStyle{

color:#ff66CC;

font-family:Times New Roman, Times, serif;

font-size:16px; font-weight:bold;}

.myTodayStyle{

color:#006633;

font-family:Times New Roman, Times, serif;

font-size:12px; font-weight:bold;}

.myDayStyle{

color:#006600;

font-family:Times New Roman, serif;

font-size:15px; font-style:normal; font-weight:bold;}

</mx:Style>

<mx:Panel width="400" height="400" horizontalAlign="center" verticalAlign="middle">

<mx:DateChooser headerStyleName="myHeaderStyle" todayStyleName="myTodayStyle" todayColor="#CCCCCC"

weekDayStyleName="myDayStyle" selectableRange="{{rangeStart: new Date(2006,0,1),

rangeEnd: new Date(2009,1,9)}}" disabledRanges="{[new Date(2010,1,15),

{rangeStart: new Date(2009,1,20), rangeEnd: new Date(2010,1,20)}]}" disabledDays="{[0,6]}"/>

</mx:Panel>

</mx:Application>

Output:-

you can see the stylist date chooser in flex. And you can see some date are disable some are not. This process are based on selectableRange, with this property you can set range between two date that are selcteable, And you can also setdisable date with the help of disabledRanges , with this property you can set disable range of the date that are between two date. Details are given in the example.

 

Advertisements

Advertisement

Posted on: April 1, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.