Descripción general del selector de Web Components XDate
El componente XDate Picker permite a los usuarios utilizar una interfaz de usuario de calendario desplegable que permite la selección intuitiva de un día, un mes y un año. Esto puede ser útil cuando un usuario de la aplicación necesita seleccionar fechas específicas, y se pueden combinar varios editores para crear una interfaz de usuario de intervalo de fechas.
[!WARNING] The
XDatePickercomponent is deprecated from version 5.0.0 of Ignite UI for Web Components. For the latest supported Ignite UI for Web Components Date Picker component refer to its respective page under "Scheduling".
Web Components XDate Picker Example
En este ejemplo se muestra cómo crear XDatePicker con la opción de seleccionar una sola fecha.
Dependencies
Al instalar el componente XDate Picker, también se deben instalar los paquetes core y inputs.
npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-inputs
npm install --save igniteui-webcomponents-layouts
Component Modules
El componente XDate Picker requiere que se registren los siguientes módulos:
import { IgcXDatePickerModule } from 'igniteui-webcomponents-inputs';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(IgcXDatePickerModule);
Usage
El componente del editor Web Components XDate Picker consta de tres partes predeterminadas: el área de texto, un botón desplegable de calendario y un botón de borrar. Estas áreas se describen a continuación:
Área de texto: Muestra la fecha seleccionada, almacenada en la
Valuepropiedad del editor.Calendario: Al hacer clic en el botón de calendario, se abrirá el menú desplegable de calendario del Selector de XDate. El calendario se abrirá para mostrar el mes del seleccionado
Valueactualmente, si lo hay. Si no se especifica aValue, el calendario mostrará el mes correspondiente a la fecha actual. Se puede hacer clic en el mes en la parte superior para mostrar una lista de meses, y lo mismo se aplica al año. También hay botones de flecha a la izquierda y a la derecha de la visualización del mes y el año que incrementarán y disminuirán el mes mostrado cronológicamente.Botón Borrar: El icono 'x' borrará el valor actual.
| Propiedad | Tipo | Descripción |
|---|---|---|
IconColor |
cadena | Cambia el color del botón del calendario. |
AllowTextInput |
booleano | El valor del selector xdate se puede escribir y modificar alternando esta propiedad a true. |
DateFormat |
enumeración | El valor predeterminado es DateShort, por ejemplo, 'dd/mm/aaaa'. Cuando se establece en DateLong, la fecha que se muestra en el editor aparecerá como, por ejemplo, miércoles 14 de abril de 2021. |
FirstDayOfWeek |
enumeración | Por defecto el domingo. Se utilizará un día determinado de la semana como primer día en cada fila semanal del calendario, por ejemplo, de lunes a domingo. |
FormatString |
cadena | Cuando se utiliza DateShort, el formato de la fecha se puede configurar, por ejemplo, 'dd/mm/aaaa'. Tenga en cuenta que si esDateFormat DateLong yFormatString están establecidos, seDateFormat ignora. |
Label |
cadena | Muestra texto personalizado encima de la fecha en la esquina superior izquierda del selector de XDate. |
MinDate |
Fecha y hora | Restringe la selección o visualización de fechas anteriores. |
MaxDate |
Fecha y hora | Restringe la selección o visualización de fechas posteriores. |
Placeholder |
cadena | Una cadena personalizada que se mostrará cuando se borre el valor dentro de la parte de edición del calendario. |
ShowClearButton |
booleano | El valor predeterminado es true, el botón de borrar está directamente a la izquierda del botón de calendario, visualizado por una X. Al hacer clic, se borrará elValue selector de XDate. La visibilidad del botón de borrado se puede activar y desactivar. |
ShowTodayButton |
booleano | El día de hoy está directamente debajo de las fechas en las que se abre el calendario. Al hacer clic, seleccionará la fecha actual. La visibilidad del botón de hoy se puede activar y desactivar. |
ShowWeekNumbers |
booleano | Los números de semana se pueden mostrar como un número, a la izquierda de cada fila de fechas, en la parte desplegable del Selector de XDate. La visibilidad del número de semana se puede activar y desactivar. |
FirstWeekOfYear |
enumeración | Configura los números de inicio de semana para todo el año. Se puede configurar en FirstDay, FirstFourDayWeek, FirstFullWeek. |
OpenOnFocus |
booleano | De forma predeterminada, la parte desplegable del selector de XDate se abre con un solo clic, lo que obliga al usuario a hacer clic en el botón del calendario para desplegar el calendario. |
Value |
fecha | Establece el valor del selector de XDate y lo selecciona en el calendario desplegable. |
Los usuarios también pueden personalizar la fuente del selector de XDate mediante las distintas propiedades de texto del control. Ellos son: TextColor, TextFontFamily, TextFontSize, TextFontStyle, y TextFontWeight.
Edición
En el ejemplo siguiente se muestra cómo habilitar la edición en el XDatePicker.
Date Limits
En el ejemplo siguiente se muestra cómo restringir las fechas seleccionadas en el XDatePicker.
Date Formats
En el ejemplo siguiente se muestra cómo aplicar una fecha larga en el XDatePicker.
Date Ranges
En el ejemplo siguiente se muestra cómo combinar varios XDatePicker controles.
API References
La siguiente es una lista de miembros de API mencionados en las secciones anteriores:
XDatePickerIconColorAllowTextInputDateFormatFirstDayOfWeekFormatStringLabelMinDateMaxDatePlaceholderShowClearButtonShowTodayButtonShowWeekNumbersFirstWeekOfYearOpenOnFocusValueTextColorTextFontFamilyTextFontSizeTextFontStyleTextFontWeight