Flex - Contrôle DateChooser

Le contrôle DateChooser est utilisé pour afficher le nom d'un mois, l'année et une grille des jours du mois, avec des colonnes étiquetées pour le jour de la semaine.

Le contrôle DateChooser permet à l'utilisateur de sélectionner une date, une plage de dates ou plusieurs dates. Le contrôle contient des boutons fléchés avant et arrière pour changer le mois et l'année.

Déclaration de classe

Voici la déclaration pour mx.controls.DateChooser classe -

public class DateChooser 
   extends UIComponent 
      implements IFocusManagerComponent, IFontContextComponent

Propriétés publiques

Sr. Non	Propriété et description
1	allowDisjointSelection : Boolean Si true, spécifie que la sélection non contiguë (disjointe) est autorisée dans le contrôle DateChooser.
2	allowMultipleSelection : Boolean Si true, spécifie que la sélection multiple est autorisée dans le contrôle DateChooser.
3	dayNames : Array Noms des jours de la semaine pour le contrôle DateChooser.
4	disabledDays : Array Les jours à désactiver dans une semaine.
5	disabledRanges : Array Désactive les jours simples et multiples.
6	displayedMonth : int Utilisée avec la propriété displayYear, la propriété shownMonth spécifie le mois affiché dans le contrôle DateChooser.
sept	displayedYear : int Utilisée avec la propriété shownMonth, la propriété shownYear spécifie l'année affichée dans le contrôle DateChooser.
8	firstDayOfWeek : Object Nombre représentant le jour de la semaine à afficher dans la première colonne du contrôle DateChooser.
9	maxYear : int La dernière année sélectionnable dans le contrôle.
dix	minYear : int La première année sélectionnable dans le contrôle.
11	monthNames : Array Noms des mois affichés en haut du contrôle DateChooser.
12	monthSymbol : String Cette propriété est ajoutée à la fin de la valeur spécifiée par la propriété monthNames pour définir les noms des mois affichés en haut du contrôle DateChooser.
13	selectableRange : Object Plage de dates entre lesquelles les dates peuvent être sélectionnées.
14	selectedDate : Date Date sélectionnée dans le contrôle DateChooser.
15	selectedRanges : Array Plages de dates sélectionnées.
16	showToday : Boolean Si true, spécifie que today est mis en surbrillance dans le contrôle DateChooser.
17	yearNavigationEnabled : Boolean Active la navigation dans l'année.
18	yearSymbol : String Cette propriété est ajoutée à la fin de l'année affichée en haut du contrôle DateChooser.

Propriétés protégées

Sr. Non	Propriété et description
1	calendarLayoutStyleFilters : Object [lecture seule] Ensemble de styles à passer de DateChooser à la mise en page du calendrier.
2	nextMonthStyleFilters : Object [lecture seule] L'ensemble des styles à passer du bouton DateChooser au bouton du mois suivant.
3	nextYearStyleFilters : Object [lecture seule] L'ensemble des styles à passer du bouton DateChooser au bouton de l'année suivante.
4	prevMonthStyleFilters : Object [lecture seule] Ensemble de styles à passer du bouton DateChooser au bouton du mois précédent.
5	prevYearStyleFilters : Object [lecture seule] Ensemble de styles à passer du bouton DateChooser au bouton de l'année précédente.

Méthodes publiques

Sr. Non	Méthode et description
1	DateChooser() Constructeur.

Événements

Sr. Non	Description de l'évenement
1	change Envoyé lorsqu'une date est sélectionnée ou modifiée.
2	scroll Envoyé lorsque le mois change en raison de l'interaction de l'utilisateur.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object

Exemple de contrôle Flex DateChooser

Suivons les étapes suivantes pour vérifier l'utilisation du contrôle DateChooser dans une application Flex en créant une application de test -

Étape	La description
1	Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2	Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3	Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier mxml modifié src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "library://ns.adobe.com/flex/spark"
   xmlns:mx = "library://ns.adobe.com/flex/mx"
   width = "100%" height = "100%" minWidth = "500" minHeight = "500"
   applicationComplete = "application_applicationCompleteHandler(event)">

   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.events.CalendarLayoutChangeEvent;
         import mx.events.FlexEvent;

         [Bindable]
         private var selectedDate:String = "";
         protected function dateChooser_changeHandler
            event:CalendarLayoutChangeEvent):void {            
            var date:Date = DateChooser(event.target).selectedDate;
            selectedDate = dateFormatter.format(date);
         }
			
         protected function application_applicationCompleteHandler
            (event:FlexEvent):void {
            selectedDate = dateFormatter.format(new Date());
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "550" height = "400" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Form Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
         
         <s:Panel id = "dateChooserPanel" title = "Using DateChooser" width = "400" 
            height = "300" includeInLayout = "true" visible = "true">
            <s:layout>
               <s:HorizontalLayout  gap = "10" verticalAlign = "middle" 
                  horizontalAlign = "center" />	
            </s:layout>
            
            <mx:DateChooser id = "dateChooser" yearNavigationEnabled = "true"
               change = "dateChooser_changeHandler(event)" />
            <s:Label id = "selection" fontWeight = "bold" 
               text = "Date selected: {selectedDate}" />
         </s:Panel>			
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ Essayez-le en ligne ]

↰ Previous page