🧰 AlpuraTimePickerActionsComponent – Guía de uso

AlpuraTimePickerActionsComponent es un componente que extiende la funcionalidad de un MatDatepicker de Angular Material para incluir una selección de hora.

Este componente se integra con un MatDatepicker para permitir al usuario seleccionar no solo una fecha, sino también una hora. El valor combinado de fecha y hora se almacena en un FormControl.

---

📁 Importación

import { AlpuraTimePickerActionsComponent } from '@alpura/commons';

---

🎛️ Inputs

Nombre	Tipo (< >)	Requerido	Descripción
dateControl	FormControl	Sí	El FormControl que contiene el valor de la fecha y hora.
datepicker	MatDatepicker<Date>	Sí	La instancia del MatDatepicker al que se añadirán las acciones de tiempo.

---

🧠 Propiedades Públicas

Nombre	Tipo (< >)	Descripción
label	string	La etiqueta para el campo de la hora.
timeControl	FormControl	El FormControl para la hora.

---

💻 Ejemplos de uso

Para utilizar este componente, necesitas un MatDatepicker y un FormControl en tu componente padre.

TS

// en tu-componente.component.ts
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-tu-componente',
  templateUrl: './tu-componente.component.html',
})
export class TuComponente {
  public dateControl = new FormControl(new Date());
}

<!-- en tu-componente.component.html -->
<mat-form-field>
  <input matInput [matDatepicker]="picker" [formControl]="dateControl">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker>
    <mat-datepicker-actions>
      <alpura-time-picker-actions
        [dateControl]="dateControl"
        [datepicker]="picker"
      ></alpura-time-picker-actions>
    </mat-datepicker-actions>
  </mat-datepicker>
</mat-form-field>

Entradas (Inputs)

Nombre	Tipo (< >)	Requerido	Descripción
dateControl	FormControl	Sí	El FormControl que contiene el valor de la fecha y hora.
datepicker	MatDatepicker<Date>	Sí	La instancia del MatDatepicker al que se añadirán las acciones de tiempo.

Propiedades Públicas

Nombre	Tipo (< >)	Descripción
label	string	La etiqueta para el campo de la hora.
timeControl	FormControl	El FormControl para la hora.

---

📬 Soporte

Para dudas o mantenimiento del componente AlpuraTimePickerActionsComponent, contactar al equipo de arquitectura.