Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Composant Flex – Sélection de la Date et de l'Heure (DateTime)

Pour la création d'un formulaire Flex, j'avais besoin de rentrer la date d'un évènement ainsi que l'heure, avant l'envoi vers un WebService. Pour la sélection de la date, il y a le composant Flex DateField qui se présente comme un champ texte et qui affiche un calendrier (DateChooser), une fois cliqué. Pour la sélection de l'heure, je pouvais utiliser des NumericStepper, permettant de choisir facilement l'heure (+/-). J'ai donc fait quelques recherches pour essayer de trouver un composant permettant de faire ces deux sélections en un seul composant.

Joel Hooks propose un composant bien fait appelé DateTimePicker, qui permet de regrouper ces pickers. Ce composant est Open Source, libre à vous de le mettre à votre sauce.Voici un exemple de son utilisation:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:timePicker="com.visualempathy.display.controls.datetime.*"
 horizontalAlign="center"
	verticalAlign="top" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            [Bindable] private var dateString:String;

            public function onClick():void
            {
                if(picker.selectedDate.getFullYear() == 1974)
                {
                    picker.selectedDate = new Date()
                    button.label = "My Birthday"
                }
                else
                {
                    picker.selectedDate = new Date(1974,4,11,7,40)
                    button.label = "Now"
                }
            }
        ]]>
    </mx:Script>
    <mx:VBox horizontalAlign="center" verticalAlign="top" width="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" height="300">
        <mx:VBox width="100%" horizontalAlign="center" verticalAlign="middle" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" backgroundColor="#F0F0F1" borderStyle="solid" borderThickness="0" cornerRadius="10">
            <mx:Label text="Date and Time Picker:" fontWeight="bold" fontSize="14"/>
            <timePicker:DateTimePicker selectedDate="{new Date()}" id="picker" change="this.dateString = picker.selectedDate.toString()" minuteIncrement="5" backgroundColor="#FFFFFF"/>
        </mx:VBox>

        <mx:HBox>
            <mx:Button id="button" label="My Birthday" click="onClick()"/>
        </mx:HBox>
        <mx:Label text="Selected Date: {dateString}" id="the" width="100%" textAlign="center" fontWeight="bold"/>
    </mx:VBox>

</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application