Directiva del editor de fecha y hora Angular

La directiva del editor de fecha y hora Ignite UI for Angular permite al usuario establecer y editar la fecha y la hora en un elemento de entrada elegido. El usuario puede editar la parte de la fecha o la hora, utilizando una entrada enmascarada editable. Además, se puede especificar el formato de visualización y entrada deseado, así como los valores mínimos y máximos para utilizar la validación.

Ejemplo de directiva de edición de fecha y hora Angular

Introducción a la directiva del editor de fecha y hora Angular

Para comenzar con la directiva Ignite UI for Angular Date Time Editor, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

ng add igniteui-angular

Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importarlosIgxDateTimeEditorModule en tu archivo app.module.ts.

// app.module.ts

...
import { IgxDateTimeEditorModule } from 'igniteui-angular/directives';
// import { IgxDateTimeEditorModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxDateTimeEditorModule],
    ...
})
export class AppModule {}

Alternativamente,16.0.0 puedes importarlosIgxDateTimeEditorDirective como una dependencia independiente.

// home.component.ts

import { IgxDateTimeEditorDirective } from 'igniteui-angular/directives';
import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
// import { IgxDateTimeEditorDirective, IGX_INPUT_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-input-group>
        <input type="text" igxInput igxDateTimeEditor [value]="date" />
    </igx-input-group>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxDateTimeEditorDirective, IGX_INPUT_GROUP_DIRECTIVES]
})
export class HomeComponent {
    public date = new Date();
}

Ahora que tienes importado el módulo o directiva Ignite UI for Angular Editor de Fechas, puedes empezar a usar laigxDateTimeEditor directiva.

Uso de la directiva del editor de fecha y hora Angular

Para usar una entrada como editor de fechas y hora, establece una directiva igxDateTimeEditor y un objeto de fecha válido como valor. Para que el editor tenga un aspecto y sensación completos, envolve la entrada en un grupo de entrada igx. Esto te permitirá no solo aprovechar las siguientes instruccionesigxInput,igxLabel,igx-prefix,igx-suffix,igx-hint, sino que también cubrirá escenarios comunes al tratar con entradas de formularios.

Vinculante

Un escenario básico de configuración que establece un objeto Date como unvalue:

public date = new Date();

<igx-input-group>
    <input type="text" igxInput igxDateTimeEditor [value]="date" />
</igx-input-group>

Para crear un enlace de datos bidireccional, se establece un:ngModel

<igx-input-group>
    <input type="text" igxInput igxDateTimeEditor [(ngModel)]="date"/>
</igx-input-group>

Enlace a cadenas ISO

AceptaIgxDateTimeEditorDirective unISO 8601 cuerdo.

La cadena puede ser una cadena completaISO, en el formatoYYYY-MM-DDTHH:mm:ss.sssZ correspondiente, o puede dividirse en partes solo por fecha y solo por hora.

Solo cita

Si una cadena solo de fecha está vinculada a la directiva, debe seguir el formato -YYYY-MM-DD. Esto solo se aplica al vincular un valor de cadena a la directiva; lainputFormat sigue usándose al escribir valores en el editor y no tiene que estar en el mismo formato. Además, al vincular una cadena solo de fecha, la directiva evitará los desplazamientos temporales forzando la hora a serT00:00:00.

Tiempo solo

Las cadenas de solo tiempo normalmente no están definidas en laECMA especificación, sin embargo, para permitir la integración de la directiva en escenarios que requieren soluciones de solo tiempo, soporta el formato de 24 horas -HH:mm:ss. El formato de 12 horas no está soportado. Ten también en cuenta que esto solo se aplica a valores vinculados.

Cadena ISO completa

Si una cadena completaISO está encuadernada, la directiva solo la analizará si se proporcionan todos los elementos requeridos porDate.parse.

Todos los valores falsos, incluyendoInvalidDate se analizarán comonull. Se analizaránISO cadenas incompletas solo por fecha, solo tiempo o completasInvalidDate.

La directiva Date Time Editor tiene una navegación intuitiva con el teclado que facilita incrementar, disminuir o saltar a través de diferentes DateParts, entre otras, sin tener que tocar el mouse.

Ctrl / Cmd + Flecha izquierda / derecha: navega entre secciones de fecha. Con Ctrl / Cmd + Derecha va al final de la sección. Si ya está allí, pasará al final de la siguiente sección, si corresponde. Funciona de manera similar en la dirección opuesta.
Arrow Up / Down- Incrementar/disminuir las porciones de fecha. Véase relacionadospinLoop
Ctrl / Cmd +;- establecer el día y la hora actuales en el editor.

Ejemplos

Formato de visualización y entrada

SoportaIgxDateTimeEditor diferentes formatos de pantalla y entrada.

Utiliza Angular 'sDatePipe, lo que le permite soportar opciones de formato predefinidas, comoshortDate ylongDate. También puede aceptar una cadena de formato construida usando caracteres soportados por elDatePipe, por ejemploEE/MM/yyyy, Fíjate que formatos comoshortDate,longDate etc., solo pueden usarse comodisplayFormat. Además, si no se proporciona nadadisplayFormat, el editor usará elinputFormat como itsdisplayFormat. Alternativamente, si lainputFormat propiedad no está establecida, el formato de entrada se infierirá de eldisplayFormat en caso de que pueda analizarse como conteniendo solo partes numéricas de fecha-hora.

Para establecer un formato de entrada específico, pásalo como cadena a la directiva IgxDateTimeEditor. Esto establecerá tanto el formato de entrada esperado por el usuario como la máscara para el editor. Además, esinputFormat basado en la localización, así que si no se proporciona ninguno, el editor usará por defecto el que usa el navegador.

<igx-input-group>
    <input type="text" igxInput [displayFormat]="'shortDate'" [igxDateTimeEditor]="'dd/MM/yyyy'" [(ngModel)]="date"/>
</igx-input-group>

La tabla que sigue muestra los formatos soportados por lasinputFormat directivas:

Formato	Descripción
`d`	La fecha será forzada con un cero a la izquierda durante la edición.
`dd`	Fecha con un cero inicial establecido explícitamente.
`M`	Mes, será forzado con un cero a la izquierda durante la edición.
`MM`	Mes con un cero inicial establecido explícitamente.
`yy`	Formato de año corto.
`yyyy`	Formato de año completo.
`h`	Las horas en formato de 12 horas se forzarán con un cero a la izquierda durante la edición.
`hh`	Horas en formato de 12 horas con un cero inicial establecido explícitamente.
`H`	Las horas en formato de 24 horas se verán forzadas con un cero a la izquierda durante la edición.
`HH`	Horas en formato de 24 horas, con un cero inicial establecido explícitamente.
`m`	Las actas, serán coaccionadas con un cero a la izquierda durante la edición.
`mm`	Minutos con un cero inicial establecido explícitamente.
`tt`	Sección AM/PM para formato de 12 horas.

Nota

LaIgxDateTimeEditorDirective directiva admite la entrada de IME. Al escribir una entrada en un idioma asiático, el control mostrará composiciones de métodos de entrada y listas de candidatos directamente en el área de edición del control, y inmediatamente refluirá alrededor del texto al finalizar la composición.

Valor mínimo máximo

Puedes especificarminValue propiedades ymaxValue para restringir la entrada y controlar la validez del ngModel.

public minDate = new Date(2020, 1, 15);
public maxDate = new Date(2020, 11, 1);

<igx-input-group>
    <input type="text" igxInput igxDateTimeEditor [minValue]="minDate" [maxValue]="maxDate" [(ngModel)]="date"/>
</igx-input-group>

LasminValue entradas yminValue también pueden ser del tipostring, véase Binding to ISO strings.

Incremento y decremento

igxDateTimeEditorDirectriz expone al públicoincrement ydecrement los métodos. Incrementan o disminuyen una fecha y horaDatePart específicas y pueden usarse de varias maneras.

En el primer escenario, si no se pasa ningún elemento específicoDatePart al método, un valor por defectoDatePart incrementará o disminuirá según la implementación de la directiva especificadainputFormat y la directiva interna. En el segundo escenario, puedes especificar explícitamente quéDatePart manipular, ya que puede adaptarse a diferentes requisitos. Además, ambos métodos aceptan un parámetro opcionaldelta de tiponumber que puede usarse para establecer el incremento/decremento.

Puede comparar ambos en el siguiente ejemplo:

Además,spinDelta es una propiedad de entrada de tipoDatePartDeltas y puede usarse para aplicar un delta diferente a cada segmento de fechas y tiempo. Se aplicará al girar con el teclado, así como al girar con losincrement métodos y,decrement siempre que no tengan eldelta parámetro proporcionado, ya que tendrá prioridadspinDelta.

En Angular formularios

La Directiva de Editor de Fecha y Hora soporta todas las directivas de formulario del módulo central FormsModule yNgModel (FormControlReactiveFormsModule, FormGroup, etc.). Esto también incluye las funciones FormulariosValidators. El siguiente ejemplo ilustra el uso delrequired validador en un formulario basado en plantillas.

Nota

Si es necesario, puedes revertir a un estado válido gestionando elvalidationFailed evento y cambiando lanewValue propiedad de los argumentos disponibles.

Ejemplo de formulario basado en plantilla:

<form>
    <igx-input-group>
        <input igxInput type="text" [(ngModel)]="date" name="form" required
            (valueChanged)="onValueChanged($event)" (validationFailed)="onValidationFailed($event)"
            [igxDateTimeEditor]="'dd/MM/yyyy'" [minValue]="minDate" [maxValue]="maxDate" [isSpinLoop]="false" />
    </igx-input-group>
</form>
<div class="divider--half"></div>

Selección de texto

Puedes forzar que el componente seleccione todo el texto de entrada en enfoque usandoigxTextSelection. Encuentra más informaciónigxTextSelection en Etiqueta & Entrada.

<igx-input-group>
    <input igxInput [igxDateTimeEditor]="'dd/MM/yyyy'" [igxTextSelection]="true"/>
</igx-input-group>

Nota

Para que el componente funcione correctamente, es crucial configurarigxTextSelection la directivaigxDateTimeEditor. La razón de esto es que ambas directivas operan sobre el evento de entradafocus, por lo que la selección de texto debería hacerse después de que la máscara esté establecida.

Estilismo

Para más detalles, consulta elInput Group styling guide.

Referencias de API

Recursos adicionales

Temas relacionados:

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

Directiva del editor de fecha y hora Angular

Ejemplo de directiva de edición de fecha y hora Angular

Introducción a la directiva del editor de fecha y hora Angular

Uso de la directiva del editor de fecha y hora Angular

Vinculante

Enlace a cadenas ISO

Solo cita

Tiempo solo

Cadena ISO completa

Navegación por teclado

Ejemplos

Formato de visualización y entrada

Nota

Valor mínimo máximo

Incremento y decremento

En Angular formularios

Nota

Selección de texto

Nota

Estilismo

Referencias de API

Recursos adicionales

Tematización