Changing the default calendar icon in a Flex DateField control at Flex Examples

Dec

Changing the default calendar icon in a Flex DateField control

By peterd

Categories: DateField Tags: DateField, skin.

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.

View MXML

<?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.

8 Responses to “Changing the default calendar icon in a Flex DateField control”

Feed for this Entry View blog reactions

1 Raul Riera Dec 28th, 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.
2 Varun Shetty Feb 23rd, 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.
3 peterd Feb 23rd, 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
4 Brixel Apr 24th, 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.
5 peterd Apr 24th, 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
6 Brixel Apr 25th, 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.
7 peterd Apr 25th, 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
8 Brixel Apr 25th, 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