Selector de fecha/hora
En los dispositivos móviles con sistema operativo Android o iOS, la vista Selector de fecha/hora muestra el selector nativo de fecha y hora que se incluye con el sistema operativo (OS). Este comportamiento significa que los usuarios ven distintos selectores de fecha y hora. Por ejemplo, en un sistema operativo Android, un usuario podría trabajar en una tarea con Google Chrome y ver el selector de fecha y hora nativo de Android. Si el usuario cambia a un iPhone de Apple, en su lugar verá el selector de fecha y hora de nativo de iOS.
Aunque la fecha se almacena en una hora UTC, la fecha y la hora que se muestra se ajusta para el huso horario del sistema del usuario.
Restricciones y limitaciones
Si el usuario escribe contenido que no es una fecha completa o no tiene un formato válido, el elemento de datos enlazado es nulo cuando el usuario desencadena un suceso de límite, como por ejemplo pulsar un botón. Si el flujo vuelve a la página, la vista está vacía. Las demás vistas que están enlazadas al mismo elemento de datos también están vacías.
Utilizar los selectores nativos de fecha y hora significa que algunas opciones de configuración no se aplican, como por ejemplo las propiedades siguientes:
- Días de la semana inhabilitados
- Fechas de prohibición de operaciones
- Fecha de inicio de prohibición de operaciones
- Fecha de finalización de prohibición de operaciones
- Inicio de semana
- Tipo de calendario (cuando se selecciona Hebreo o Islámico )
- Tipo de selector de fecha (cuando se selecciona En línea )
Enlace de datos
Defina o modifique el enlace de datos para la vista en la pestaña de propiedades Generales. El enlace de datos contiene la fecha y hora iniciales a mostrar y almacena las actualizaciones de este valor. El tipo de datos es Date.
Propiedades de configuración
En Configuración, establezca o modifique las propiedades de aspecto y comportamiento de la vista.
- Tamaño de pantalla
- Una propiedad de configuración que tenga el icono Tamaños de pantalla
junto al nombre de propiedad puede tener distintos valores para cada tamaño de pantalla. Si no define un valor, el tamaño de la pantalla hereda el valor del siguiente tamaño de pantalla más grande como valor predeterminado.
- Definiciones de temas
- Las definiciones de temas especifican los colores y los estilos de una vista y determinan su aspecto. Puede obtener una vista previa del aspecto de las vistas en el editor de temas. Consulte Temas.
| Propiedad de configuración del aspecto | Descripción | Tipo de datos |
|---|---|---|
| Tipo de selector de fecha |
El tipo de visualización de calendario para el selector de fecha y hora:
El valor predeterminado es Entrada de texto. |
DatePickerType |
| Ancho | El ancho del selector de fecha y hora cuando está seleccionado el tipo Entrada de texto para la propiedad Selector de fecha y hora. Puede especificar la anchura en px (píxeles), en % (porcentaje) o en unidades em. Por ejemplo, 200px. Si no se especifica ningún tipo de unidad con el valor numérico, se presupone que es px De forma predeterminada, no hay ninguna anchura especificada. | String |
| Tamaño |
El tamaño del texto de la vista, el tamaño del texto de etiqueta y la cantidad de relleno alrededor del texto. Por ejemplo, para que el texto y la etiqueta sean más legibles en los teléfonos inteligentes, puede establecer esta opción de configuración en Large para compensar el tamaño de pantalla pequeño. | TextSizeStyle |
| Colocación de etiqueta |
La ubicación de colocación de etiqueta para el selector de fecha y hora. | LabelPlacement |
| Ancho de etiqueta |
El ancho de la etiqueta. Puede especificar el ancho en px (píxeles), % (porcentaje) o en unidades. Por ejemplo, 50px, 20% o 0,4em. Si no se especifica ningún tipo de unidad, se asume px. | String |
| Formato | El formato utilizado para visualizar y analizar el texto que se especifica en el campo de texto. Acepta una variedad de entradas de fecha, incluidos los formatos más próximos al lenguaje natural, con o sin separadores, sólo día y mes, sólo día, etc. (MM/dd/yyyy, dd/MM/yyyy, yyyy-MM-dd, yyyy MM dd, yyyyMMdd, DD MM, DD). Por ejemplo:
Esta opción de configuración da soporte a los mismos formatos que el formato SimpleDatede Java y sólo se aplica cuando un navegador no tiene un selector de fecha y hora nativo. |
String |
| Inicio de semana | El día con que empieza la semana. El valor predeterminado es Domingo. | DatePickerWeekStart |
| Días de la semana inhabilitados | Uno o más días de la semana que se bloquearán en el calendario. De forma predeterminada, no hay ningún día inhabilitado. | DatePickerDisabledWeekDays |
| Mostrar botón Hoy | Mostrar u ocultar el botón Hoy, que establece la fecha con el valor de la fecha de hoy. De forma predeterminada, este botón no se muestra. | Boolean |
| Mostrar botón Borrar | Mostrar u ocultar el botón Borrar, que borra el valor de fecha. De forma predeterminada, este botón no se muestra. | Boolean |
| Orientación | La orientación del calendario cuando se pulsa en el mismo. | DatePickerOrientation |
| Estilo de color | El estilo de color del selector de fecha y hora. Los colores corresponden a variables en el tema especificado. El valor predeterminado es Predeterminado(azul oscuro). | DatePickerColorStyle |
| Mostrar número de semana |
En los calendarios gregorianos, muestra el número de semana dentro del año. Por ejemplo, la última semana de un año gregoriano es el número de semana52. De forma predeterminada, no se muestra ningún número de semana. | Boolean |
| Resaltar hoy | Especifica si se muestra resaltada la fecha de hoy en el calendario. De forma predeterminada, la fecha de hoy no aparece resaltada. | Boolean |
| Ocultar cabecera | Oculta la cabecera en la parte superior del selector de fecha y hora personalizado. De forma predeterminada, la cabecera no está oculta. | Boolean |
| Mostrar icono de calendario | Muestra el icono de calendario en el cuadro de entrada de texto. | Boolean |
| Estilo de selector de año | El estilo del selector de año, Valor predeterminado o Moderno. | tableHFStyle |
| Propiedad de configuración del comportamiento | Descripción | Tipo de datos |
|---|---|---|
| Solo selector personalizado | Mostrar siempre el selector de fecha y hora en los dispositivos móviles
en lugar del selector de fecha y hora nativo. En los dispositivos móviles, siempre se intenta inicialmente mostrar el selector de fecha y hora nativo. No obstante, siempre que se especifica alguna de las siguientes propiedades de configuración no soportadas, se muestra el selector de fecha y hora personalizado:
De forma predeterminada, se utiliza el selector de fecha y hora personalizado y el selector de fecha y hora nativo según corresponda en cada momento. |
Boolean |
| Incluir selector de tiempo | Mostrar el selector de hora con la vista Selector de fecha/hora. De forma predeterminada, el selector de hora no se muestra. | Boolean |
| Tipo de calendario | El tipo de calendario:
El valor predeterminado es Gregoriano. |
CalendarType |
| Índice de pestañas | El índice de secuencia de pestañas. Los índices de tabulado empiezan en 1 y se pueden establecer de forma dispersa. Por ejemplo, puede utilizar 1, 5, 10. La propiedad Índice de pestañas controla la secuencia de las pestañas al desplazarse entre las distintas áreas de interfaz de usuario pulsando la tecla Tabulador. | String |
| Texto de marcador | El texto de marcador de posición a utilizar cuando no se ha especificado ninguna fecha. generalmente, el texto es una breve descripción o ejemplo de la entrada que requiere el usuario. Si el elemento de datos enlazados no contiene un valor, los usuarios verán la sugerencia hasta que escriban en el campo. De forma predeterminada, no hay ningún texto de marcador de posición especificado. | String |
| Fecha de inicio disponible | Especifica la fecha y hora de inicio disponible. Todas las fechas anteriores a la fecha de inicio disponible se bloquean. El formato de la fecha de inicio disponible se especifica en la propiedad Formato de las propiedades de aspecto. De forma predeterminada, no hay ninguna fecha de inicio disponible especificada. | Date |
| Fecha de finalización disponible | La fecha y hora de finalización disponible. Todas las fechas posteriores a la fecha de finalización disponible se bloquean. El formato de la fecha de finalización disponible se especifica en la propiedad Formato de las propiedades de aspecto. De forma predeterminada, no hay ninguna fecha de finalización disponible especificada. | Date |
| Fechas de prohibición de operaciones | Una fecha o una lista de varias fechas no consecutivas a descartar. Si se proporciona una lista de fechas de prohibición de operaciones, la vista utiliza el selector de fecha y hora personalizado en lugar del selector de fecha y hora del navegador nativo. De forma predeterminada, no se especifican fechas de prohibición de operaciones. | Date (List) |
| Fecha de inicio de prohibición de operaciones | La fecha de inicio de un rango de fechas consecutivas que desea descartar. De forma predeterminada, no hay ninguna fecha de inicio de prohibición de operaciones especificada. | Date |
| Fecha de finalización de prohibición de operaciones | La fecha de finalización de un rango de fechas consecutivas que desea descartar. De forma predeterminada, no hay ninguna fecha de finalización de prohibición de operaciones especificada. | Date |
| Iniciar vista | El nivel de granularidad con el que se debe iniciar el calendario:
El valor predeterminado es Mes. |
DatePickerStartView |
| Modalidad de vista mínima | Los niveles de granularidad de fecha mínimos a utilizar en el calendario.
El valor predeterminado es Días. |
DatePickerMinViewMode |
| Sin cierre automático | Especifica que el calendario no se cerrará cuando se seleccione una fecha. En su lugar, el calendario se cerrara cuando el selector de fecha y hora pierde el foco. De forma predeterminada, el calendario se cierra automáticamente cuando se selecciona una fecha. | Boolean |
| Rango de siglo | Intervalo que precede al año actual y que marca el inicio del rango de 100 años cuando se especifica un año de dos dígitos. De forma predeterminada, el valor se establece a 50 años, lo que significa que el selector de fechas lo correlacionará con el rango de 100 años que empiece 50 años atrás. Por ejemplo, para un rango de siglo de 50 en 2023, el inicio del rango de siglo será 2023 - 50 = 1973, lo que hace que 2072 marque el fin del rango de siglo. | Integer |
| Inhabilitar análisis inteligente | Inhabilita el análisis inteligente del texto que especifica el usuario. El análisis inteligente está habilitado de forma predeterminada. Cuando el análisis inteligente está inhabilitado, sólo se aceptan los valores que utilizan el formato de fecha/hora especificado. Cualquier formato que no sea el formato especificado se declara no válido, y se solicita al usuario que utilice el formato aceptado en su lugar. | Boolean |
Ejemplo
Si desea tener un botón de calendario en el que se pueda pulsar, puede colocar una vista Selector de fecha/hora dentro de una vista Grupo de entrada. En las propiedades de la vista Grupo de entrada, defina la propiedad Tipo de botón a Icono y defina la propiedad Información de botón a calendario. En el suceso On button click para la vista Grupo de entrada, escriba la serie siguiente:
${Control_ID}._instance.pickerControl.show();Sucesos
Establezca o modifique los manejadores de sucesos para la vista en las propiedades de Sucesos. Puede establecer que los sucesos se activen mediante programación o cuando un usuario interactúe con la vista. Para obtener información sobre cómo definir y codificar sucesos, consulte Sucesos definidos por el usuario. El selector de fecha/hora tiene los siguientes tipos de manejadores de sucesos:
- On load: activado cuando se carga la página. Por ejemplo:
var workerStart = ${StartDate}.getDate(); me.setStart(workerStart); - On change: Se activa cuando se detecta un cambio. Por ejemplo:
return confirm("Are you sure you want to change date?") - On day cell render: Se activa cuando hay una representación de celda de día. Se desencadena antes de la fecha que se muestra en el selector de fecha y hora. Por ejemplo:
me.setDate("01/01/2015")
Según el suceso específico, puede utilizar lógica de JavaScript para modificar los efectos de la vista. Puede encontrar más información sobre cómo utilizar sucesos con vistas en el tema Sucesos definidos por el usuario.
Métodos
Para obtener información detallada sobre los métodos disponibles para el selector de fecha/hora, consulte API JavaScript del selector de fecha/hora.
Recursos adicionales
Para obtener información sobre cómo crear un coach o una página, consulte Creación de coaches.
Para obtener información sobre las propiedades estándar (General, Configuración, Posicionamiento, Visibilidady Atributos HTML), consulte Ver propiedades.