Flex - Control de selección de fecha

El control DateChooser se usa para mostrar el nombre de un mes, el año y una cuadrícula de los días del mes, con columnas etiquetadas para el día de la semana.

El control DateChooser permite al usuario seleccionar una fecha, un rango de fechas o varias fechas. El control contiene botones de flecha hacia adelante y hacia atrás para cambiar el mes y el año.

Declaración de clase

A continuación se muestra la declaración de mx.controls.DateChooser clase -

public class DateChooser 
   extends UIComponent 
      implements IFocusManagerComponent, IFontContextComponent

Propiedades publicas

No Señor	Descripción de propiedad
1	allowDisjointSelection : Boolean Si es verdadero, especifica que se permite la selección no contigua (disjunta) en el control DateChooser.
2	allowMultipleSelection : Boolean Si es verdadero, especifica que se permite la selección múltiple en el control DateChooser.
3	dayNames : Array Los nombres de los días de la semana para el control DateChooser.
4	disabledDays : Array Los días para deshabilitar en una semana.
5	disabledRanges : Array Desactiva días únicos y múltiples.
6	displayedMonth : int Usado junto con la propiedad DisplayYear, la propiedad DisplayMonth especifica el mes mostrado en el control DateChooser.
7	displayedYear : int Usado junto con la propiedad DisplayMonth, la propiedad DisplayYear especifica el año mostrado en el control DateChooser.
8	firstDayOfWeek : Object Número que representa el día de la semana que se mostrará en la primera columna del control DateChooser.
9	maxYear : int El último año seleccionable en el control.
10	minYear : int El primer año seleccionable en el control.
11	monthNames : Array Nombres de los meses que se muestran en la parte superior del control DateChooser.
12	monthSymbol : String Esta propiedad se agrega al final del valor especificado por la propiedad monthNames para definir los nombres de los meses que se muestran en la parte superior del control DateChooser.
13	selectableRange : Object Rango de fechas entre las cuales se pueden seleccionar fechas.
14	selectedDate : Date Fecha seleccionada en el control DateChooser.
15	selectedRanges : Array Intervalos de fechas seleccionados.
dieciséis	showToday : Boolean Si es verdadero, especifica que hoy está resaltado en el control DateChooser.
17	yearNavigationEnabled : Boolean Habilita la navegación por año.
18	yearSymbol : String Esta propiedad se agrega al final del año que se muestra en la parte superior del control DateChooser.

Propiedades protegidas

No Señor	Descripción de propiedad
1	calendarLayoutStyleFilters : Object [solo lectura] El conjunto de estilos que se pasará del selector de fechas al diseño del calendario.
2	nextMonthStyleFilters : Object [solo lectura] El conjunto de estilos que se pasará del botón DateChooser al siguiente mes.
3	nextYearStyleFilters : Object [solo lectura] El conjunto de estilos que se pasará del botón DateChooser al siguiente año.
4	prevMonthStyleFilters : Object [solo lectura] El conjunto de estilos que se pasará del selector de fecha al botón del mes anterior.
5	prevYearStyleFilters : Object [solo lectura] El conjunto de estilos para pasar del botón DateChooser al año anterior.

Métodos públicos

No Señor	Método y descripción
1	DateChooser() Constructor.

Eventos

No Señor	Descripción del evento
1	change Se envía cuando se selecciona o cambia una fecha.
2	scroll Se envía cuando cambia el mes debido a la interacción del usuario.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

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

Ejemplo de control Flex DateChooser

Sigamos los siguientes pasos para verificar el uso del control DateChooser en una aplicación Flex creando una aplicación de prueba:

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación .
2	Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.

A continuación se muestra el contenido del archivo mxml modificado 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 vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]

↰ Previous page