The following example shows how you can change the default calendar icon that appears in a DateField control in Flex by setting the skin style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/28/changing-the-default-calendar-icon-in-a-flex-datefield-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="top"
backgroundColor="white">
<mx:Style>
DateField {
skin: Embed("clock_add.png");
/* null the skins defined in default.css */
upSkin: ClassReference(null);
overSkin: ClassReference(null);
downSkin: ClassReference(null);
disabledSkin: ClassReference(null);
}
</mx:Style>
<mx:DateField id="dateField" />
</mx:Application>
View source is enabled in the following example.
{ 14 comments… read them below or add one }
I love your examples, I would like to see more examples about changing the default animation effect of the componnents.
Keep up the good work.
how do you still have the date displayed after you select a date for the second time.
the default flex behavior would disable the selected date if you select it again.
for some reason all your date field flex examples have the opposite behavior.. and i have seen your code you have not included anything different that would not do this.
Varun Shetty,
Are you using Flex 2 or Flex 3? I compiled this with Flex 3, and I believe the behavior changed slightly. For example, if I hold down Ctrl and click the currently selected date again, it deselects the date. I don’t remember the exact behavior in Flex 2 though.
Peter
Hey Peter,
I’m on Flex 3 and this example doesn’t work for me. My DateField’s are in a separate component that gets called into action through the PopUpManager. I can get it to work only if I do not set the “disabledSkin” style. For some reason, setting that one to null, or to even another embedded image, causes none of the icon styles to show for the control.
I’ve been able to find almost no information on this. I’ve also tried various things like setting the styles on “creationComplete”, directly setting the styles inline, etc. but nothing seems to solve the problem.
Any idea to what might be happening or what else I might try? Thanks.
Brixel,
Would you mind filing a bug at http://bugs.adobe.com/flex/ (file it in the Flex SDK project and the “mx:DateField” component). Also, if you could attach a small, reproducible test case to the bug, that would help out a lot.
Finally, if you post the bug number here, maybe a few of us here can vote and subscribe to the bug. :)
Thanks,
Peter
Peter,
After work I tried to recreate it locally to submit the example, but was unable to reproduce. So I became suspicous of working over the VPN and waited until this morning to try it again locally. It worked fine this morning, so it must have been some sort of display issue ( which I’ve noticed both locally and remote a few times with Flex ).
That said, off topic, I did run across something with the formatString property of the DateField. I noticed it doesn’t support the common short date format “M/D/YYYY”. It formats the date as “MM/DD/YYYY” and removes the “/” slash separators. So:
myDateField.formatString = “M/D/YYYY”;
myDateField.selectedDate = new Date();
Would display as: 04252008
Instead of: 4/25/2008
This I can reproduce at will. Is this a known issue already or should I submit? I did some poking and was unable to find it as a known issue.
Brixel,
I filed a bug in the public Flex bug base, http://bugs.adobe.com/jira/browse/SDK-15386. Feel free to subscribe to bug updates or add any comments.
I’m not actually sure it is a “bug”. According to the Flex 3 docs, the DateField formatString property can contain any combination of “MM”, “DD”, “YY”, “YYYY”, delimiter, and punctuation characters.
UPDATE: Actually, another solution may be to use a custom
labelFunctionon the DateField, see “Setting a custom label function on a Flex DateField control”.<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Script> <![CDATA[ private function dateField_labelFunc(item:Date):String { return dateFormatter.format(item); } ]]> </mx:Script> <mx:DateFormatter id="dateFormatter" formatString="M/D/YYYY" /> <mx:DateField id="dateField" initialize="dateField.selectedDate = new Date(2008,3,1);" labelFunction="dateField_labelFunc" /> </mx:Application>Thanks,
Peter
Thanks Peter,
That is what I ended up using was the labelFunction, but I still think that the DateField should be able to handle the “M/D/YYYY” in the formatString, so thanks for filing the bug.
Brixel
hi can you let me know how can i make claender icon invisible when my datefield control is disabled?
vasu gulati,
You could do something like the following:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:CheckBox id="checkBox" label="enabled" selected="true" /> <mx:DateField id="df" enabled="{checkBox.selected}" disabledSkin="{null}" /> </mx:Application>Peter
Hi Peter,
I have been trying out your examples and they are always helpful. This time I am facing a problem. I am using a DateField Control in an AIR application. This code doesn’t work in AIR. I tried for flex and its working fine there. How to adjust the code to change the calendar icon in Adobe AIR ?
I searched your AIR examples but couldn’t find any help there .
Please reply !
Hi Peter,
Please ignore my last post as I got the solution. DateField CSS style header is not compatible in AIR. I set the style name as .dateField and gave this in the styleName property of dateField as below.
< mx:DateField styleName=”dateField”/>
Things working pretty fine now.
hi,
I need to use the disabledSkin property in <DateField> mxml tag as <DateField disabledSkin=” Here i need to give my png image file name which has to be replaced in place of disabledDate ” >
Can anyone help me ..I need to change the disabledSkin or Image with my own image..Is it possible??..