Flex - Controllo DateChooser

Il controllo DateChooser viene utilizzato per visualizzare il nome di un mese, l'anno e una griglia dei giorni del mese, con colonne etichettate per il giorno della settimana.

Il controllo DateChooser consente all'utente di selezionare una data, un intervallo di date o più date. Il controllo contiene i pulsanti freccia avanti e indietro per modificare il mese e l'anno.

Dichiarazione di classe

Di seguito è riportata la dichiarazione per mx.controls.DateChooser classe -

public class DateChooser 
   extends UIComponent 
      implements IFocusManagerComponent, IFontContextComponent

Proprietà pubbliche

Suor n	Proprietà e descrizione
1	allowDisjointSelection : Boolean Se true, specifica che la selezione non contigua (disgiunta) è consentita nel controllo DateChooser.
2	allowMultipleSelection : Boolean Se true, specifica che è consentita la selezione multipla nel controllo DateChooser.
3	dayNames : Array I nomi dei giorni della settimana per il controllo DateChooser.
4	disabledDays : Array I giorni da disabilitare in una settimana.
5	disabledRanges : Array Disabilita i giorni singoli e multipli.
6	displayedMonth : int Utilizzata insieme alla proprietà DisplayYear, la proprietà DisplayMonth specifica il mese visualizzato nel controllo DateChooser.
7	displayedYear : int Utilizzata insieme alla proprietà DisplayMonth, la proprietà DisplayYear specifica l'anno visualizzato nel controllo DateChooser.
8	firstDayOfWeek : Object Numero che rappresenta il giorno della settimana da visualizzare nella prima colonna del controllo DateChooser.
9	maxYear : int L'ultimo anno selezionabile nel controllo.
10	minYear : int Il primo anno selezionabile nel controllo.
11	monthNames : Array Nomi dei mesi visualizzati nella parte superiore del controllo DateChooser.
12	monthSymbol : String Questa proprietà viene aggiunta alla fine del valore specificato dalla proprietà monthNames per definire i nomi dei mesi visualizzati nella parte superiore del controllo DateChooser.
13	selectableRange : Object Intervallo di date tra le quali è possibile selezionare le date.
14	selectedDate : Date Data selezionata nel controllo DateChooser.
15	selectedRanges : Array Intervalli di date selezionati.
16	showToday : Boolean Se true, specifica che oggi è evidenziato nel controllo DateChooser.
17	yearNavigationEnabled : Boolean Abilita la navigazione per anno.
18	yearSymbol : String Questa proprietà viene aggiunta alla fine dell'anno visualizzato nella parte superiore del controllo DateChooser.

Proprietà protette

Suor n	Proprietà e descrizione
1	calendarLayoutStyleFilters : Object [sola lettura] Il set di stili da passare da DateChooser al layout del calendario.
2	nextMonthStyleFilters : Object [sola lettura] Il set di stili da passare dal DateChooser al pulsante del mese successivo.
3	nextYearStyleFilters : Object [sola lettura] Il set di stili da passare dal DateChooser al pulsante dell'anno successivo.
4	prevMonthStyleFilters : Object [sola lettura] Il set di stili da passare dal DateChooser al pulsante del mese precedente.
5	prevYearStyleFilters : Object [sola lettura] La serie di stili da passare dal DateChooser al pulsante dell'anno precedente.

Metodi pubblici

Suor n	Metodo e descrizione
1	DateChooser() Costruttore.

Eventi

Suor n	Descrizione dell'evento
1	change Inviato quando viene selezionata o modificata una data.
2	scroll Inviato quando il mese cambia a causa dell'interazione dell'utente.

Metodi ereditati

Questa classe eredita i metodi dalle seguenti classi:

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

Esempio di controllo Flex DateChooser

Seguiamo i seguenti passaggi per verificare l'utilizzo del controllo DateChooser in un'applicazione Flex creando un'applicazione di test:

Passo	Descrizione
1	Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione .
2	Modifica HelloWorld.mxml come spiegato di seguito. Mantieni invariato il resto dei file.
3	Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti.

Di seguito è riportato il contenuto del file mxml modificato 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>

Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione . Se tutto va bene con la tua applicazione, produrrà il seguente risultato: [ Provalo online ]

↰ Previous page