- Selector de Tiempo
🧬 Componentes ensamblados
Selector de Tiempo
Contribute¿Qué es el selector de tiempo?
El componente selector de tiempo es un componente de interfaz de usuario que permite a los usuarios seleccionar una hora específica de una interfaz de 24 horas, típicamente usado en formularios o interfaces de entrada de datos donde el usuario necesita especificar un tiempo específico.
Cuando se añade un componente de selector de tiempo al lienzo, se muestra una interfaz de 24 horas que muestra horas, minutos y segundos. El usuario puede ajustar el tiempo moviendo el cursor del ratón o usando las flechas arriba y abajo.
Properties
Propiedades disponibles del selector de tiempo. JavaScript puede ser escrito para leer o alterar información sobre componentes.
| Propiedades | Descripción |
|---|---|
| Valor por defecto | El valor inicial del componente. Puede cambiar dinámicamente el valor inicial escribiendo JavaScript en {{}}. |
| Formatear | Un formato de fecha válido. Ver diarioJS. |
| Marcador de posición | El valor se mostrará cuando el campo de entrada esté vacío. |
| Tamaño de paso | el tamaño del paso en la unidad de minutos |
| Etiqueta | El nombre del campo mostrado al usuario |
| Leyenda | Un título usado para describir el campo en detalle |
| Etiqueta oculta | Establecer si mostrar o no la etiqueta |
| Posición | Define la posición de la etiqueta relativa al componente |
| Alineación | Establecer el alineamiento (alinear a la izquierda o a la derecha) de la etiqueta |
| Width | Cuando la etiqueta esté en el lado izquierdo del componente, establezca la proporción de ancho de la etiqueta. |
| Manejador del Evento | Activar consultas, componentes de control o llamar a otras APIs en respuesta a eventos de componentes. |
| Deshabilitado | Controla el estado de si el componente está desactivado. El componente no puede ser modificado o enfocado cuando está desactivado. |
| Sólo lectura | Controlar el estado de si el componente es de sólo lectura. Un componente de sólo lectura puede ser seleccionado y enfocado, pero no puede ser modificado. |
| Sugerencia | Los usuarios pueden ingresar la descripción del componente aquí. La descripción se mostrará cuando esté enfocada. Formato Markdown soportado. |
| Mostrar botón de borrar | controlar si se muestra o no un botón claro en el campo de entrada |
| Sugerencia | El usuario puede introducir la descripción del componente aquí. La descripción se mostrará cuando esté enfocada. Formato Markdown soportado. |
| Campo requerido | Válido sólo cuando el interruptor está encendido. |
| Regla personalizada | Crea aquí tu lógica de validación. Las reglas deben ser hechas en JavaScript y cubiertas por {{}}. |
| Ocultar mensaje de validación | Puede ocultar el mensaje de error cambiando el estado oculto cuando el valor de entrada es incorrecto. Puedes cambiar dinámicamente el estado oculto por JavaScript. |
| Clave de Formulario | Especifique una clave de un componente de formulario de envoltura al construir el atributo de datos. |
| Hidden | Controlar dinámicamente si el componente está oculto. Puede cambiar el estado oculto a través de un valor booleano dinámico. |
| Color del tema | Permite a los usuarios especificar el color de fondo y opacidad del botón |
Methods
Puede usar otros componentes para controlar el componente. Apoyamos los siguientes cuatro métodos:
- setValue
Para establecer el valor de tiempo de entrada, por ejemplo, {{“value1”}}
| Propiedades | Descripción |
|---|---|
| Valor | Input value |
- limpiarValor
Limpiar el valor del componente seleccionado
- validate
Para verificar que la información de entrada es legal
- clearValidate
Para borrar el mensaje de validación
Controlador de eventos
| Evento | Descripción |
|---|---|
| Cambiar | Cuando un usuario cambia el valor de tiempo seleccionado, realice una acción específica personalizada por los usuarios. |
Datos
El componente tiene algunos datos comúnmente utilizados, que pueden llamarse a través de {{componentName.propertyName}} en la aplicación.
| Nombre de la propiedad | Descripción |
|---|---|
| esquema de color | la propiedad de color de la fecha |
| regla personalizada | la regla personalizada especificada por el usuario |
| deshabilitado | un valor booleano indica el estado deshabilitado |
| nombre de pantalla | el nombre de este componente (es decir, botón1) |
| eventos | un valor de matriz para la secuencia de eventos |
| formato | el formato de fecha y hora |
| formDataKey | la clave de datos de formulario de la fecha |
| hidden | estado oculto (verdadero o falso) |
| ocultar mensaje de validación | un valor booleano indica si el mensaje de validación está oculto |
| etiqueta | valor de etiqueta |
| alineación de etiqueta | alineación de etiqueta de conmutación (izquierda o derecha) |
| posición de etiqueta | posición de la etiqueta del interruptor (izquierda o derecha) |
| ancho de etiqueta | el entero que representa el ancho de la etiqueta. |
| etiqueta completa | un valor booleano indica si la etiqueta está llena. |
| minutoPaso | valor del tamaño del paso minuto |
| marcador de posición | valor del marcador |
| requerido | un valor booleano indica el estado requerido de la entrada. |
| limpiar | un valor booleano indica si la fecha se mostrará limpia |
| tooltipText | valor del texto del tooltip |
| valor | Ingrese el valor de fecha y hora |
Ejemplo: {{timePicker1.format}}
Caso de uso
A continuación, demostraremos cómo mapear los datos desde el selector de datos a la hora actual y ajustarlos a la hora actual con un botón.
Paso 1 Añadir una acción
Creemos una tabla en la API REST llamada promoteCodes, incluyendo 6 columnas: code, id, createdAt, expiredAt, startedAt, updatedAt. Utilizaremos el tiempo actualizadoAt para uso de muestras.
Luego podemos crear una nueva acción para la API REST desde la lista de acciones, listando todos los datos en promoteCodes y llamado restapi1.
Haz clic en Guardar y Ejecutar para activar esta acción.
Paso 2 Añadir componentes
A continuación, podemos añadir un componente selector de tiempo y un componente botón al lienzo. Para el valor predeterminado del componente de tiempo, lo establecemos como la última actualización de la primera promoción de código de los demás datos de api.
{{restapi1.data.promoteCodes[0].updatedAt}}También hemos etiquetado el botón como “Ahora” como se muestra a continuación
Paso 3 Configurar el componente
Para el componente button podemos configurarlo para establecer la fecha en el componente selector de hora a la fecha y hora actuales.
- En el controlador de edición de eventos, seleccione
componente de controlen acción, selecciona el componenteselector de tiempoque quieres actualizar como objetivo del evento. - Elige la acción
setValuey establece el valor como{{currentUserInfo.updatedAt}}
Prueba de paso 4
Ahora que al hacer clic en el botón “Ahora”, la hora debería cambiar a la hora actual. En cuanto a aquí, tenemos 20:03:05 pero puede ser diferente cuando lo pruebas.
