TdnInputTime

Paquete: @tiendana/ngx-core/forms

Selector de rango de horas con interfaz de doble picker (hora inicio - hora fin). Ideal para definir horarios de disponibilidad, turnos laborales o rangos de tiempo.

Características

✅ Rango de horas: Selección de hora inicial y final en formato 12 horas
✅ Interfaz intuitiva: Doble picker con scroll para horas, minutos y meridiano (AM/PM)
✅ Formato 12h: Selección natural con AM/PM, internamente convierte a 24h
✅ Restaurar día completo: Botón opcional (showRestore) para restablecer a rango 00:00 - 23:59
✅ Botón limpiar: Activo por defecto, opción para borrar la selección
✅ Fullscreen: cuando el picker no cabe ni arriba ni abajo del campo
✅ Posicionamiento inteligente: Auto-ajuste según espacio disponible
✅ Cierre automático: Click fuera, Escape, o pérdida de visibilidad

API

Inputs

Propiedad	Tipo	Default	Descripción
`placeholder`	`string`	`''`	Texto placeholder cuando no hay valor
`settings`	`TimeInputSettings`	`undefined`	Configuración del componente

Outputs

Evento	Tipo	Descripción
`onSelect`	`TimeInputValues`	Emite cuando se selecciona un rango de tiempo
`onClear`	`any`	Emite cuando se limpia la selección
`onOpen`	`void`	Emite cuando se abre el picker
`onClose`	`void`	Emite cuando se cierra el picker
`focus`	`void`	Se emite al abrir el picker
`blur`	`void`	Se emite al cerrarlo

Atributos HTML

Atributo	Tipo	Descripción
`tdnControl`	Directive	Conecta con `FormControl` y activa estados visuales
`formControlName`	string	Nombre del control en un `FormGroup`
`[formControl]`	FormControl	Referencia directa a un FormControl

Configuración

Interfaz TimeInputSettings

interface TimeInputSettings {
    escapeToClose?: boolean;       // Cerrar con tecla Escape (default: true)
    customInitialValue?: TimeInputValues; // Sin efecto: el componente no lo lee (no precarga el picker al abrir)
    showSeconds?: boolean;          // Sin efecto: no existe selector de segundos (default: false)
    showRestore?: boolean;          // Mostrar botón restaurar día completo (default: false)
    clear?: boolean;                // Mostrar botón limpiar (default: true)
    icons?: Partial<TimeInputIcons>;
    translations?: Partial<TimeInputTranslations>;
}

interface TimeInputIcons {
    chevron: string | SafeHtml;      // Ícono del dropdown
    restore: string | SafeHtml;      // Ícono del botón restaurar
    clear: string | SafeHtml;        // Ícono del botón limpiar
    arrowForward?: string | SafeHtml; // Ícono separador entre horarios
}

interface TimeInputTranslations {
    initialTime: string;   // Default: 'Hora inicial'
    finalTime: string;     // Default: 'Hora final'
    cancel: string;        // Default: 'Cancelar'
    accept: string;        // Default: 'Aceptar'
    resetButton: string;   // Default: 'Restablecer al día completo'  (title del botón restaurar)
}

interface TimeInputValues {
    from: {
        hour: number;        // 0-23
        minute: number;      // 0-59
        second?: number;     // 0-59
        millisecond?: number; // 0-999
    };
    to: {
        hour: number;
        minute: number;
        second?: number;
        millisecond?: number;
    };
}

Valores predeterminados

{
    escapeToClose: true,
    showSeconds: false,   // sin efecto
    showRestore: false,
    clear: true,
    translations: {
        initialTime: 'Hora inicial',
        finalTime: 'Hora final',
        cancel: 'Cancelar',
        accept: 'Aceptar',
        resetButton: 'Restablecer al día completo'
    }
}

Ajustes sin efecto

customInitialValue y showSeconds están declarados en la interfaz, pero el componente no los usa: el picker no se precarga al abrir y no hay selector de segundos. Para un valor inicial, asigna el valor al control.

Métodos públicos y clases del host

resetToFullDayRange(), openPicker(), closePickers(), finish(), close() y togglePicker(). Clases del host: tdn-input-time, disabled y ontop (el picker abre por encima del campo).

Ejemplos y Demos

Uso Básico

Cargando demo...

Ver código

Con Valor Inicial

Cargando demo...

Ver código

Con Botón Restaurar

Cargando demo...

Ver código

Sin Botón Limpiar

Cargando demo...

Ver código

Configuración Completa

Cargando demo...

Ver código

Eventos del Componente

Cargando demo...

Ver código

Con Validación Required

Cargando demo...

Ver código

Validación Personalizada (Horario Laboral)

Cargando demo...

Ver código

Ejemplo Completo

Cargando demo...

Ver código

Funcionalidades Avanzadas

Formato de Valores

El componente trabaja con objetos TimeInputValues que contienen dos propiedades from y to:

{
    from: {
        hour: 8,         // 0-23 (formato 24h internamente)
        minute: 30,      // 0-59
        second: 0,       // 0-59 (opcional)
        millisecond: 0   // 0-999 (opcional)
    },
    to: {
        hour: 17,
        minute: 0,
        second: 59,
        millisecond: 999
    }
}

Navegación del Picker

Scroll: Los selectores de hora, minuto y meridiano soportan scroll
Click: Selección directa de valores
Auto-scroll: Al abrir, hace scroll a los valores actuales
Escape: Cierra el picker sin guardar cambios
Click fuera: Cierra el picker y descarta cambios
Botón Aceptar: Guarda la selección y cierra el picker. Queda deshabilitado hasta que ambos rangos están completos
Formato: El picker muestra 12 horas con una columna a.m./p.m.; el valor se guarda en 24 horas

Posicionamiento Inteligente

A diferencia de tdn-select y tdn-input-date, el desplegable de tdn-input-time no se aloja en document.body: permanece dentro del host.

El picker se posiciona automáticamente:

Abajo: Si hay espacio suficiente debajo del input
Arriba: Si no hay espacio abajo pero sí arriba
Fullscreen: cuando el picker no cabe ni arriba ni abajo del campo
Centrado: Se centra horizontalmente respecto al input

Buenas Prácticas

✅ Hacer

Usar validación cuando el rango de tiempo es crítico
Mostrar botón "Restaurar" para rangos de día completo
Proporcionar placeholder descriptivo
Validar duración mínima/máxima del rango cuando sea necesario
Combinar con tdnErrors para mensajes claros
Usar eventos onSelect para cálculos derivados (duración, etc.)

❌ Evitar

Omitir validación en formularios críticos
Usar para selección de hora única (considerar input type="time" nativo)
Deshabilitar el botón limpiar cuando es necesario reiniciar
Validar solo en submit (validar en tiempo real)

Accesibilidad

✅ Label asociado con <label> dentro de <tdn-form-element>
✅ Navegación por teclado (Escape para cerrar)
✅ Mensajes de error claros
✅ Estados visuales para disabled, touched, valid
✅ Cierre automático al perder visibilidad

Personalización Avanzada

Token de Configuración Global

Puedes configurar valores por defecto para todos los componentes TdnInputTime usando el token TDN_TIME_INPUT_DEFAULT_SETTINGS. Un proveedor reemplaza el objeto completo: entrega todos los campos (escapeToClose, showSeconds, showRestore, clear, icons, translations).

Configuración Global

import { ApplicationConfig } from '@angular/core';
import { TDN_TIME_INPUT_DEFAULT_SETTINGS } from '@tiendana/ngx-core/forms';

export const appConfig: ApplicationConfig = {
    providers: [
        {
            provide: TDN_TIME_INPUT_DEFAULT_SETTINGS,
            useValue: {
                escapeToClose: true,
                showSeconds: false,
                showRestore: true,
                clear: true,
                icons: {
                    chevron: '<i class="material-symbols-rounded">expand_more</i>',
                    restore: '<i class="material-symbols-rounded">restore</i>',
                    arrowForward: '<i class="material-symbols-rounded">arrow_forward</i>',
                    clear: '<i class="material-symbols-rounded">close</i>'
                },
                translations: {
                    initialTime: 'Hora inicial',
                    finalTime: 'Hora final',
                    cancel: 'Cancelar',
                    accept: 'Aceptar',
                    resetButton: 'Restablecer al día completo'
                }
            }
        }
    ]
};

También puedes configurar a nivel de módulo o componente:

@Component({
    providers: [
        {
            provide: TDN_TIME_INPUT_DEFAULT_SETTINGS,
            useValue: { /* tu configuración */ }
        }
    ]
})
export class MyComponent { }

Componentes Relacionados

TdnFormElement - Wrapper para estilos consistentes
TdnInputDate - Selector de fechas que puede combinarse con tiempo
tdnControl - Seguimiento de estado con signals

Características​

API​

Inputs​

Outputs​

Atributos HTML​

Configuración​

Valores predeterminados​

Métodos públicos y clases del host​

Ejemplos y Demos​

Uso Básico​

Con Valor Inicial​

Con Botón Restaurar​

Sin Botón Limpiar​

Configuración Completa​

Eventos del Componente​

Con Validación Required​

Validación Personalizada (Horario Laboral)​

Ejemplo Completo​

Funcionalidades Avanzadas​

Formato de Valores​

Navegación del Picker​

Posicionamiento Inteligente​

Buenas Prácticas​

✅ Hacer​

❌ Evitar​

Accesibilidad​

Personalización Avanzada​

Token de Configuración Global​

Componentes Relacionados​

Características

API

Inputs

Outputs

Atributos HTML

Configuración

Valores predeterminados

Métodos públicos y clases del host

Ejemplos y Demos

Uso Básico

Con Valor Inicial

Con Botón Restaurar

Sin Botón Limpiar

Configuración Completa

Eventos del Componente

Con Validación Required

Validación Personalizada (Horario Laboral)

Ejemplo Completo

Funcionalidades Avanzadas

Formato de Valores

Navegación del Picker

Posicionamiento Inteligente

Buenas Prácticas

✅ Hacer

❌ Evitar

Accesibilidad

Personalización Avanzada

Token de Configuración Global

Componentes Relacionados