Flex DateChooser with style and selectable and disable date


 

Flex DateChooser with style and selectable and disable date

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.

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.

 

Ads