Corfix Form Builder: cómo utilizar el componente de fecha y hora.

1. Pestaña «Visualización»

La pestaña «Visualización» controla el aspecto general del componente de fecha y hora.

• Etiqueta:

  • Este es el título visible del campo de fecha y hora que verán los usuarios. Es un campo obligatorio.

  • Ejemplo: «Fecha del incidente», «Hora de inicio», «Fecha y hora de finalización».

• Posición de la etiqueta:

  • Determina dónde se muestra la etiqueta con respecto al campo de entrada (p. ej., Arriba, Izquierda, Derecha, Abajo).

  • Valor predeterminado: Arriba.

• Permitir introducción manual:

  • Si se marca esta opción, los usuarios podrán introducir la fecha y la hora directamente en el campo, además de utilizar el calendario o el selector de hora.

• Texto de ayuda:

  • Texto que aparece dentro del campo de entrada antes de que el usuario escriba nada. Sirve de indicación al usuario sobre el formato esperado.

  • Ejemplo: «MM/DD/AAAA HH:MM AM/PM».

• Descripción:

  • Proporciona texto explicativo adicional sobre el campo, que suele mostrarse debajo del cuadro de entrada.

  • Ejemplo: «Introduzca la fecha y la hora exactas en las que tuvo lugar el evento».

• Información sobre herramientas:

  • Texto que aparece cuando el usuario pasa el ratón por encima del campo. Resulta útil para ofrecer ayuda rápida o contexto.

• Clase CSS personalizada:

  • Permite a los usuarios avanzados aplicar estilos personalizados al componente mediante clases CSS.

• Ocultar etiqueta:

  • Si se marca esta opción, no se mostrará la etiqueta del componente.

• Edición modal:

  • (Los detalles no se ven completamente en la captura de pantalla, pero normalmente se refiere a la edición en una ventana modal emergente).

• Incluir en informes:

  • Si se marca esta casilla, los datos de este campo se incluirán en los informes.

2. Pestaña «Fecha»

Esta pestaña contiene ajustes específicos relacionados con la introducción de la fecha.

• Habilitar introducción de fecha:

  • Si se marca, estará disponible la función de selección de fecha (selector de calendario).

• Desactivar fines de semana:

  • Si se marca esta casilla, los usuarios no podrán seleccionar el sábado ni el domingo en el calendario.

• Desactivar días laborables:

  • Si se marca esta casilla, los usuarios no podrán seleccionar del lunes al viernes en el calendario.

3. Pestaña «Hora»

Esta pestaña contiene ajustes específicos relacionados con la introducción de la hora.

• Habilitar la introducción de la hora:

  • Si se marca esta casilla, estará disponible la función de selección de la hora (selector de hora).

• Intervalo por hora:

  • Determina el incremento para la selección de horas (por ejemplo, «1» para incrementos de una hora, «2» para cada dos horas).

  • Valor predeterminado: 1.

• Intervalo de minutos:

  • Determina el incremento para la selección de minutos (por ejemplo, «1» para cada minuto, «15» para incrementos de un cuarto de hora).

  • Valor predeterminado: 1.

• Formato de 12 horas (AM/PM):

  • Si se marca esta casilla, el selector de hora utilizará un formato de 12 horas con los selectores AM/PM. Si no se marca, utilizará un formato de 24 horas.

4. Pestaña «Datos»

La pestaña «Datos» gestiona las propiedades de los datos subyacentes del campo de fecha y hora.

• Valores múltiples:

  • Si se marca, permite al usuario introducir varios valores de fecha y hora para este campo.

• Valor por defecto:

  • La fecha y hora que aparece prellenada en el campo de entrada al cargar el formulario. Los usuarios pueden sobrescribir este valor. Se trata de un valor estático.

• Fecha predeterminada:

  • Permite establecer una fecha predeterminada dinámica, a menudo utilizando una función como moment() para establecer la fecha y hora actuales.

5. Pestaña «Validación»

La pestaña «Validación» define las reglas para garantizar que la fecha y hora introducidas por el usuario cumplan unos requisitos específicos.

• Obligatorio:

  • Si se marca esta casilla, el usuario deberá introducir una fecha y hora en este campo antes de enviar el formulario.

• Utilizar el calendario para establecer la fecha mínima:

  • Le permite seleccionar una fecha mínima en un calendario, lo que impide que los usuarios seleccionen fechas anteriores a dicha fecha.

• Utilizar el calendario para establecer maxDate:

  • Le permite seleccionar una fecha máxima en un calendario, lo que impide que los usuarios seleccionen fechas posteriores a dicha fecha.

6. Pestaña «Condicional»

La pestaña «Condicional» le permite configurar reglas que determinan cuándo debe mostrarse u ocultarse este componente de fecha y hora en función de los valores de otros componentes del formulario.

• Simple:

  • Normalmente se trata de un botón de alternancia o un menú desplegable para elegir entre lógica condicional simple o avanzada.

• Este componente debe mostrarse:

  • Elija si el componente debe «Mostrarse» u «Ocultarse» (opciones implícitas) en función de la condición.

• Cuando el componente del formulario:

  • Seleccione otro componente de su formulario cuyo valor active la condición.

• Tenga el valor:

  • Especifique el valor exacto que debe tener el componente del formulario seleccionado para que se cumpla la condición.

  Ejemplo: Podría configurar una regla para que el campo «Fecha de regreso» solo se muestre cuando la casilla «¿Se trata de un viaje de ida y vuelta?» esté marcada.

Panel de vista previa

El panel de vista previa, situado a la derecha del cuadro de diálogo, le muestra cómo aparecerá visualmente el campo de entrada «Fecha/Hora» en su formulario. Suele incluir un campo de entrada de texto y un icono de calendario, lo que le permite hacerse una idea en tiempo real de la interacción del usuario.

Acciones en la parte inferior del cuadro de diálogo:

• Guardar: guarda todos los cambios realizados en la configuración del componente «Fecha/Hora».

• Cancelar: descarta cualquier cambio no guardado y cierra el cuadro de diálogo.

• Eliminar: Elimina el componente «Fecha/Hora» del formulario.

Prácticas recomendadas para el componente «Fecha/Hora»:

• Sea específico con la etiqueta: Indique claramente qué fecha y hora se necesitan (por ejemplo, «Fecha de inspección», «Hora de inicio»).

• Habilite la introducción de fecha y hora de forma adecuada: habilite «Introducción de fecha» o «Introducción de hora» únicamente si ambas son realmente necesarias. Si solo se necesita la fecha, deshabilite la hora, y viceversa.

• Establezca fechas mínimas y máximas para el control: utilice minDate y maxDate en «Validación» para evitar entradas ilógicas (p. ej., fechas futuras para eventos pasados o fechas fuera del plazo del proyecto).

• Tenga en cuenta la «Fecha por defecto»: para eventos actuales, establezca la «Fecha por defecto» en moment() para que se rellene automáticamente con la fecha y hora actuales, lo que ahorrará tiempo a los usuarios.

• Utilice la visualización condicional: oculte los campos de fecha y hora hasta que sean relevantes, simplificando así el formulario (por ejemplo, muestre la «Fecha de finalización» solo después de que se haya introducido una «Fecha de inicio»).