Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Les contrôles DateChooser et DateField

Compatible Flex 3. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 13 mars 2010

Cet article est une traduction de l'aide Adobe Flex.

Adobe a donné son accord concernant la traduction de la documentation.

Introduction

Les contrôles DateChooser et DateField permettent à l'utilisateur de sélectionner des dates depuis des calendriers graphiques. Le contrôle DateChooser possède un calendrier comme interface utilisateur. Le contrôle DateField possède un champ de texte qui lors du clic, affiche un contrôle DateChooser pour sélectionner la date en conséquence. Les propriétés du DateField sont un sur-ensemble des propriétés du DateChooser.

Pour obtenir des renseignements complets de référence, regardez DateChooser et DateField dans la référence du language d'Adobe Flex .

A propos du contrôle DateChooser

Le contrôle DateChooser affiche le nom d'un mois, l'année, et une grille des jours du mois, avec les jours dans la semaine comme légende des colonnes.

Ce contrôle est utile dans une application dans laquelle un calendrier doit être toujours visible. L'utilisateur peut sélectionner une seule date depuis la grille. Le contrôle contient des boutons précédent et suivant pour changer le mois et les années. Vous pouvez désactiver la sélection de certaines dates, et limiter l'affichage sur une plage de dates.

L'image suivante affiche un contrôle DateChooser:

Le changement du mois affiché ne change pas la date sélectionnée. Par conséquent, la date sélectionnée peut ne pas être toujours visible. Le contrôle DateChooser se redimensionne si nécessaire pour prendre en compte la largeur des légendes des jours de la semaine. Par conséquent, si vous utilisez des noms de jours, au lieu de lettres, en tant que légendes, le calendrier sera assez large pour afficher les noms complets des jours.

A propos du contrôle DateField

Le contrôle DateField est un champ de texte qui affiche la date et une icône de calendrier à sa droite. Quand un utilisateur clique n'importe où dans le contrôle, un sélecteur de date identique au contrôle DateChooser s'affiche au premier plan. Si aucune date n'est sélectionnée, le champ de texte est vide et le mois courant est affiché dans le sélecteur de date.

Quand le sélecteur de date est ouvert, l'utilisateur peut utiliser les boutons pour se déplacer dans les mois et années, et selectionner une date. Quand l'utilisateur sélectionne une date, le sélecteur se ferme et le champ de texte affiche la date sélectionnée.

Ce contrôle est utile dans les applications devant posséder un outil de sélection de dates, mais qui veulent réduire l'espace d'affichage des informations de la date.

L'exemple suivant montre 2 images du contrôle DateField. Sur la gauche, il s'agit d'un contrôle avec le sélecteur fermé; l'icône de calendrier apparaît à droite du champ de texte. Sur la gauche, c'est un contrôle DateField avec le sélecteur ouvert:

Vous pouvez utiliser le contrôle DateField partout où vous souhaitez qu'un utilisateur puisse sélectionner une date. Par exemple, vous pouvez utiliser le contrôle dans un système de réservations pour un hôtel, avec certaines dates sélectionnables et d'autres désactivées. Vous pouvez aussi utiliser le contrôle DateField dans une application qui doit afficher des événements, tels que des résultats ou des spectacles, quand un utilisateur sélectionne une date.

Création d'un contrôle DateChooser ou DateField

Vous définissez un contrôle DateChooser en MXML avec la balise <mx:DateChooser>. Vous définissez un contrôle DateField en MXML avec la balise <mx:DateField>. Spécifiez une valeur à la propriété id si vous souhaitez utiliser votre contrôle ailleurs dans une balise MXML ou dans un bloc ActionScript.

L'exemple suivant créé un contrôle DateChooser; pour créer un contrôle DateField, changer simplement <mx:DateChooser> en <mx:DateField>. L'exemple utilise l'événement change du contrôle DateChooser pour afficher la date sélectionnée dans différents formats.

<?xml version="1.0"?>
<!-- controls\date\DateChooserEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Script>
        <![CDATA[
 import mx.events.CalendarLayoutChangeEvent;
 
        private function useDate(eventObj:CalendarLayoutChangeEvent):void {
            // Make sure selectedDate is not null.
            if (eventObj.currentTarget.selectedDate == null) {
                return 
            }
 
            //Access the Date object from the event object.         
            day.text=eventObj.currentTarget.selectedDate.getDay();
            date.text=eventObj.currentTarget.selectedDate.getDate();
            month.text=eventObj.currentTarget.selectedDate.getMonth() + 1;
            year.text=eventObj.currentTarget.selectedDate.getFullYear();
 
            wholeDate.text= (eventObj.currentTarget.selectedDate.getMonth() + 1) +
                "/" + (eventObj.currentTarget.selectedDate.getDate() +            
                "/" + eventObj.currentTarget.selectedDate.getFullYear());
        }
]]>
    </mx:Script>
 
    <mx:DateChooser id="date1" change="useDate(event)"/>
 
    <mx:Form>
        <mx:FormItem label="Day of week">
            <mx:TextInput id="day" width="100"/>
        </mx:FormItem>
        <mx:FormItem label="Day of month">
            <mx:TextInput id="date" width="100"/>
        </mx:FormItem>
        <mx:FormItem label="Month">
            <mx:TextInput id="month" width="100"/>
        </mx:FormItem>
        <mx:FormItem label="Year">
            <mx:TextInput id="year" width="100"/>
        </mx:FormItem>
        <mx:FormItem label="Date">
            <mx:TextInput id="wholeDate" width="100"/>
        </mx:FormItem>
    </mx:Form>      
</mx:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Notez que la première ligne de la fonction de rappel de l'événement détermine si la propriété selectedDate vaut null. Cette vérification est nécessaire parce qu'en sélectionnant, avec la touche Control enfoncée, la date déjà sélectionnée, celle-ci est désélectionnée, la propriété selectedDate est valorisée à null, et l'événement change est diffusé.

Note: Le code qui détermine la valeur du champ mois ajoute 1 au nombre du mois car le contrôle DateChooser utilise un système de mois basé sur 0, dans lequel Janvier est le mois 0 et Décembre est le mois 11.

Utilisation de la classe Date

Les contrôles DateChooser et DateField utilisent la propriété selectedDate pour stocker la date sélectionnée, en tant qu'objet de type Date. Vous pouvez créer des objets Date pour représenter des valeurs de date et d'heure, où pour accèdez à la date dans la propriété selectedDate.

La classe Date possède un grand nombre de méthodes pour manipuler des dates. Pour plus d'informations sur la classe Date, veuillez vous reporter au document Adobe Flex Language Reference.

En MXML, vous pouvez créer et configurer un objet Date en utilisant la balise <mx:Date>. Cette balise expose les accesseurs de la classe Date en tant que propriétés MXML vous permettant d'initialiser un objet Date.

Par exemple, le code suivant crée un contrôle DateChooser, et définit la date sélectionnée sur le 10 avril 2005 (notez bien que les mois démarrent à 0 pour le contrôle DateChooser).

<mx:DateChooser id="date1">
        <mx:selectedDate>
            <mx:Date month="3" date="10" fullYear="2005"/>
        </mx:selectedDate>
</mx:DateChooser>

L'exemple suivant utilise de l'ActionScript en ligne pour définir la date sélectionnée initiale d'un contrôle DateField.

<mx:DateField id="date3" selectedDate="{new Date (2005, 3, 10)}"/>

Vous pouvez aussi définir la date sélectionnée dans une fonction comme le montre l'exemple suivant:

<mx:Script>
    <![CDATA[
        private function initDC():void {
            date2.selectedDate=new Date (2005, 3, 10);        
        }
    ]]>
</mx:Script>
 
<mx:DateChooser id="date2" creationComplete="initDC();"/>

Vous pouvez utiliser la syntaxe à point des propriétés pour accéder aux accesseurs de l'objet de type Date stocké dans la propriété selectedDate. Par exemple, la ligne suivante affiche dans un champ de texte, l'année à 4 chiffres de la date sélectionnée.

<mx:TextInput text="{date1.selectedDate.fullYear}"/>

Spécification des styles pour les texte de l'en-tête, les jours de la semaine et la date du jour

Les propriétés suivantes permettent de spécifier des styles de texte pour différentes régions du contrôle:

  • headerStyleName
  • weekDayStyleName
  • todayStyleName

Ces propriétés vous permettent de définir des styles de texte pour l'en-tête, les jours de la semaine et la date du jour. Vous ne pouvez pas utiliser ces propriétés pour définir des styles qui ne sont pas des styles de texte tel que todayColor.

L'exemple suivant définit un contrôle DateChooser qui a une en-tête bleue, en gras, avec une police Times New Roman en 16 pixels. Les jours de la semaine sont en gras, italique, vert, avec une police Courrier en 15 pixels. La date du jour est en orange, avec une police Times New Roman en 12 pixels. L'arrière-plan de la date du jour est gris et est défini directement dans la balise mx:DateChooser.

<?xml version="1.0"?>
<!-- controls\date\DateChooserStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Style>
        .myHeaderStyle{
            color:#6666CC; 
            font-family:Times New Roman, Times, serif;
            font-size:16px; font-weight:bold;}
        .myTodayStyle{
            color:#CC6633; 
            font-family:Times New Roman, Times, serif;
            font-size:12px; font-weight:bold;}
        .myDayStyle{
            color:#006600; 
            font-family:Courier New, Courier, mono;
            font-size:15px; font-style:italic; font-weight:bold;}
    </mx:Style>
 
    <mx:DateChooser 
        headerStyleName="myHeaderStyle" 
        todayStyleName="myTodayStyle" 
        todayColor="#CCCCCC"
        weekDayStyleName="myDayStyle"/>
</mx:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Spécification des dates sélectionnables

Le contrôle DateChooser possède les propriétés suivantes qui vous permettent de spécifier quelles dates l'utilisateur peut sélectionner :

Propriété Description
disabledDays Un tableau de jours de la semaine que l'utilisateur ne peut pas sélectionner. Souvent utilisé pour désactiver les jours du weekend.
disabledRanges Un tableau de dates que l'utilisateur ne peut pas sélectionner. Le tableau peut contenir des objets Date,des objets en précisant des plages de dates, ou les deux.
selectableRange Une plage unique de dates que l'utilisateur peut sélectionner. L'utilisateur peut naviguer uniquement dans les mois contenus dans la plage. Utilisez la propriété disabledRange pour désactiver des dates dans la plage.

L'exemple suivant affiche un contrôle DateChooser possédant les caractéristiques suivantes :

  • La propriété selectableRange limite les utilisateurs dans la sélection de dates entre le 01 Janvier et le 15 Mars 2006. Les utilisateurs peuvent uniquement naviguer entre les mois compris entre Janvier et Mars de l'année 2006.
  • La propriété disabledRanges empêche l'utilisateur de sélectionner le 11 Janvier où n'importe quelle date entre le 23 Janvier et le 10 Février.
  • La propriété disabledDays empêche l'utilisateur de sélectionner les Samedis et Dimanches.
<?xml version="1.0"?>
<!-- controls\date\DateChooserSelectable.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
  <mx:DateChooser 
    selectableRange="{{rangeStart: new Date(2006,0,1),
        rangeEnd: new Date(2006,2,15)}}"
    disabledRanges="{[new Date(2006,0,11), 
        {rangeStart: new Date(2006,0,23), rangeEnd: new Date(2006,1,10)}]}"
    disabledDays="{[0,6]}"/>
</mx:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Définition des propriétés de DateChooser et DateField en ActionScript

Les propriétés du contrôle DateChooser et DateField prennent des valeurs qui sont des valeurs simples, des tableaux et des objets Date. Bien que vous puissiez définir la plupart de ces propriétés en MXML, il est parfois plus simple d'en définir certaines en ActionScript.

Par exemple, l'exemple de code suivant utilise un tableau pour définir la propriété disabledDays et donc empêcher la sélection du Samedi et Dimanche dans le calendrier. L'exemple définit la propriété disabledDays de 2 façons, en utilisant des balises et en utilisant un attribut de balise:

<?xml version="1.0"?>
<!-- controls\date\DateChooserDisabledOption.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <!-- Use tags.-->
    <mx:DateField>
            <mx:disabledDays>
                <mx:Number>0</mx:Number>
                <mx:Number>6</mx:Number>
            </mx:disabledDays>
    </mx:DateField>     
 
    <!-- Use tag attributes.-->
    <mx:DateField disabledDays="[0,6]"/>
</mx:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

L'exemple suivant définit les propriétés dayNames, firstDayOfWeek, headerColor, and selectableRange d'un contrôle DateChooser en utilisant un événement initialize:

<?xml version="1.0"?>
<!-- controls\date\DateChooserInitializeEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Script>
        <![CDATA[
import mx.events.DateChooserEvent;
 
            private function dateChooser_init():void {
                myDC.dayNames=['Sun', 'Mon', 'Tue', 
                    'Wed', 'Th', 'Fri', 'Sat'];
                myDC.firstDayOfWeek = 3;
                myDC.setStyle("headerColor", 0xff0000);
                myDC.selectableRange = {rangeStart: new Date(2004,0,1), 
                    rangeEnd: new Date(2007,0,10)};
            }
 
            private function onScroll():void {
                myDC.setStyle("fontStyle", "italic");
            }
]]>
    </mx:Script>
 
    <mx:DateChooser id="myDC" 
        width="200" 
        creationComplete="dateChooser_init();" 
        scroll="onScroll();"/>
</mx:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Pour définir la propriété selectableRange, le code crée deux objets Date qui représentent la date de début et la date de fin de la plage. L'utilisateur ne peut sélectionner que des dates de la plage. Cet exemple change aussi le style fontStyle du contrôle DateChooser en italique après la première fois où l'utilisateur aura utilisé la barre de défilement.

Vous pouvez sélectionner plusieurs dates dans le contrôle DateChooser en définissant la propriété selectedRanges. Cette propriété contient un tableau d'objets. Chaque objet du tableau contient deux dates: une date de départ et une date de fin. En définissant les dates de chaque objet sur la même date, vous pouvez sélectionner n'importe quel nombre de dates individuelles dans le DateChooser.

L'exemple suivant utilise un objet XML pour définir la date d'un contrôle DateChooser. Une itération a lieu sur l'objet XML et un objet Date est créé pour chaque date du XML. Ces objets sont ensuite utilisés pour déterminer les dates sélectionnées dans le DateChooser:

<?xml version="1.0" encoding="utf-8"?>
<!-- controls\date\ProgrammaticDateChooserSelector.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
    <mx:Script>
        <![CDATA[
private function init():void {
                dc1.displayedMonth = 1;
                dc1.displayedYear = 2008;
            }           
 
            public function displayDates():void {
                var dateRanges:Array = [];
                for (var i:int=0; i<shows.show.length(); i++) { 
                    var cDate:Date = 
                        new Date(shows.show[i].showDate.toString());           
                    var cDateObject:Object = 
                        {rangeStart:cDate, rangeEnd:cDate};
                    dateRanges.push(cDateObject);
                }
                dc1.selectedRanges = dateRanges;
            }
]]>
    </mx:Script>
 
    <!-- Define the data for the DateChooser -->    
    <mx:XML id="shows" format="e4x">
     <data>
        <show>
         <showID>1</showID>
         <showDate>02/28/2008</showDate>
         <showTime>10:45am/11:15am</showTime>
        </show>
        <show>
         <showID>2</showID>
         <showDate>02/23/2008</showDate>
         <showTime>7:00pm</showTime>
        </show>
     </data>
    </mx:XML>
 
    <mx:DateChooser id="dc1" 
        showToday="false" 
        creationComplete="displayDates()"
    />
 
</mx:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Formatage des dates avec le contrôle DateField

Vous pouvez utiliser la propriété formatString du contrôle DateField pour formater la chaîne du champ texte du contrôle. La propriété formatString ne peut contenir que des combinaisons de “MM”, ” DD ”, ” YY ”, ” YYYY ”, délimiteur, et caractères de ponctuations. La valeur par défaut est “MM/DD/YYYY”.

Dans l'exemple suivant, vous sélectionnez une valeur pour la propriété formatString depuis la liste déroulante.

<?xml version="1.0"?>
<!-- controls\date\DateFieldFormat.mxml -->
<mx:Application  xmlns:mx="http://www.adobe.com/2006/mxml" >
    <mx:HBox>
        <mx:ComboBox id="cb1">
          <mx:ArrayCollection>
             <mx:String>MM/DD/YY</mx:String>
             <mx:String>MM/DD/YYYY</mx:String>
             <mx:String>DD/MM/YY</mx:String>
             <mx:String>DD/MM/YYYY</mx:String>
             <mx:String>DD MM, YYYY</mx:String>
          </mx:ArrayCollection>     
        </mx:ComboBox>
 
        <mx:DateField id="date2" 
            editable="true" 
            width="100" 
            formatString="{cb1.selectedItem}"
        />      
    </mx:HBox>        
</mx:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Le contrôle DateField vous permet également de spécifier une fonction de formatage qui convertit la date en chaîne au format de votre choix pour l'affichage du texte dans le champ du contrôle. La propriété labelFunction du contrôle DateField et la classe DateFormatter vous aide à formater des dates.

Par défaut, la date d'un contrôle DateField est formatée dans cette forme “MM/DD/YYYY”. Vous utilisez la propriété labelFunction du contrôle DateField pour spécifier une fonction formatant la date affichée dans le champ de texte, et retournant une chaîne (String) contenant la date. La fonction a la signature suivante:

public function formatDate(currentDate:Date):String {
    ...
    return dateString;
}

Vous pouvez choisir un nom différent pour la fonction , mais elle doit posséder un argument unique de type Date et retourner la date en tant que chaîne pour un affichage dans le champ texte. L'exemple suivant définit la fonction formatDate() pour afficher la date dans la forme yyyy/mm/dd, tel que 2005/11/24. Cette fonction utilise un objet DateFormatter pour le formatage:

<?xml version="1.0"?>
<!-- controls\date\DateChooserFormatter.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Script>
        <![CDATA[
private function formatDate(date:Date):String {
                return dfconv.format(date);
            }
]]>
    </mx:Script>
 
    <mx:DateFormatter id="dfconv" formatString="YYYY/MM/DD"/>
    <mx:DateField id="df" labelFunction="formatDate" parseFunction="null"/>
</mx:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

La propriété parseFunction spécifie une fonction qui parcoure la date saisie en tant que texte dans le champ de texte du contrôle DateField et retourne un objet Date au contrôle. Si vous ne souhaitez pas que l'utilisateur puisse saisir une date, définissez la valeur de la propriété parseFunction sur null quand vous définissez la propriété labelFunction.

Si vous souhaitez que l'utilisateur puisse saisir une date dans le champ de texte du contrôle, vous devez spécifier une fonction pour la propriété parseFunction qui convertit la chaîne en objet de type Date utilisable par le contrôle DateField. Si vous spécifiez la propriété parseFunction, elle réalise généralement l'inverse de la fonction spécifiez dans la propriété labelFunction.

La fonction spécifiée dans la propriété parseFunction a la signature suivante:

public function parseDate(valueString:String, inputFormat:String):Date {
    ...
    return newDate
}

Où l'argument valueString contient la chaîne de texte entrée par l'utilisateur dans le champ de texte , et l'argument inputFormat contient le format de la chaîne. Par exemple, si vous souhaitez que l'utilisateur ne puisse saisir du texte qu'avec 2 caractères pour le mois, le jour et l'année, vous devez passer la chaîne ” MM/DD/YY ” à l'argument inputFormat.

Interaction utilisateur

Le sélecteur de dates inclut des boutons représentés par des flèches, qui permettent de naviguer à travers les mois. L'utilisateur peut sélectionner une date avec la souris, en cliquant sur la date désirée.

En cliquant sur le bouton suivant, on avance d'un mois; en cliquant sur le bouton précédent, le mois affiché est le mois précédent. En cliquant sur le bouton suivant en Décembre et sur le bouton précédent en Janvier, le déplacement se fait vers l'année suivante (ou précédente). Le clic sur une date la sélectionne. Par défaut, la date sélectionnée est indiquée par un arrière-plan vert et la date du jour est indiquée par un arrière-plan noir avec la date en blanc. Le clic sur une date déjà sélectionnée, la déselectionne.

Les raccourcis claviers suivants permettent aux utilisateurs de naviguer dans les contrôles DateChooser et DateField:

Touche Description
flèche gauche Déplace la date sélectionnée sur le jour actif précédent du mois. Le déplacement ne se fait pas vers le mois précédent
flèche droite Déplace la date sélectionnée sur le jour actif suivant du mois. Le déplacement ne se fait pas vers le mois suivant
flèche haute Déplace, vers le haut de la colonne, la date sélectionnée sur le prochain jour actif. Le déplacement ne se fait pas vers le mois précédent
flèche basse Déplace, vers le bas de la colonne, la date sélectionnée sur le prochain jour actif. Le déplacement ne se fait pas vers le mois suivant
Page haute Affiche le calendrier du mois précédent
Page haute Affiche le calendrier du mois suivant
Début Déplace la sélection sur le premier jour actif du mois
Fin Déplace la sélection sur le dernier jour actif du mois
+ Déplace vers l'année suivante
- Déplace vers l'année précédente
CTRL + flèche basse DateField uniquement : ouvre le contrôle DateChooser
CTRL + flèche haute DateField uniquement : ferme le contrôle DateChooser
Echap DateField uniquement : annule l'opération
Entrée DateField uniquement : sélectionne la date et ferme le contrôle DateChooser