Changing the default calendar icon in a Flex DateField control

14 Responses to Changing the default calendar icon in a Flex DateField control

1. Raul Riera says:

   December 28, 2007 at 11:47 pm

   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.

   Reply
2. Varun Shetty says:

   February 23, 2008 at 4:39 pm

   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.

   Reply
3. peterd says:

   February 23, 2008 at 11:43 pm

   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

   Reply
4. Brixel says:

   April 24, 2008 at 6:45 am

   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.

   Reply
5. peterd says:

   April 24, 2008 at 9:48 am

   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

   Reply
6. Brixel says:

   April 25, 2008 at 4:51 am

   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.

   Reply
7. peterd says:

   April 25, 2008 at 8:25 am

   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 labelFunction on 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

   Reply
8. Brixel says:

   April 25, 2008 at 12:30 pm

   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

   Reply
9. vasu gulati says:

   May 24, 2009 at 11:06 pm

   hi can you let me know how can i make claender icon invisible when my datefield control is disabled?

   Reply
10. Peter deHaan says:

    May 26, 2009 at 8:29 am

    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

    Reply
11. Alex Fisherr says:

    December 10, 2009 at 12:48 am

    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 !

    Reply
12. Alex Fisherr says:

    December 10, 2009 at 1:16 am

    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.

    Reply
13. arun says:

    December 28, 2009 at 12:01 am

    hi,
    I need to use the disabledSkin property in &ltDateField&gt mxml tag as &ltDateField disabledSkin=” Here i need to give my png image file name which has to be replaced in place of disabledDate ” &gt

    Reply
14. arun says:

    December 28, 2009 at 12:04 am

    Can anyone help me ..I need to change the disabledSkin or Image with my own image..Is it possible??..

    Reply