Directiva del editor de fecha y hora Angular

La Ignite UI for Angular permite al usuario configurar y editar la fecha y la hora en un elemento de entrada elegido. El usuario puede editar la parte de fecha u hora mediante una entrada enmascarada editable. Además, se puede especificar el formato de entrada y visualización deseado, así como los valores mínimo y máximo para utilizar la validación.

Angular Date Time Editor Directive Example

Getting Started with Angular Date Time Editor Directive

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 a la Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importar IgxDateTimeEditorModule en su archivo app.module.ts.

// app.module.ts

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

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

Alternativamente, a partir de 16.0.0 puede importar IgxDateTimeEditorDirective como una dependencia independiente.

// home.component.ts

import { IgxDateTimeEditorDirective, IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular';
// 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 tiene importada la directiva o el módulo Ignite UI for Angular Date Time Editor, puede comenzar a usar la directiva igxDateTimeEditor.

Using the Angular Date Time Editor Directive

Para utilizar una entrada como editor de fecha y hora, establezca una directiva igxDateTimeEditor y un objeto de fecha válido como valor. Para tener una apariencia completa del editor, ajuste la entrada en un igx-input-group. Esto le permitirá no solo aprovechar las siguientes directivas igxInput, igxLabel, igx-prefix, igx-suffix, igx-hint, sino que también cubrirá escenarios comunes cuando se trata de entradas de formulario.

Binding

Un escenario de configuración básica que establece un objeto Fecha como value:

public date = new Date();

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

Para crear un enlace de datos bidireccional, configure un ngModel:

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

Enlace a cadenas ISO

IgxDateTimeEditorDirective acepta cadenas ISO 8601.

La cadena puede ser una cadena ISO completa, en el formato YYYY-MM-DDTHH:mm:ss.sssZ o podría separarse en partes de solo fecha y solo de hora.

Solo cita

Si una cadena de solo fecha está vinculada a la directiva, debe seguir el formato YYYY-MM-DD. Esto se aplica solo cuando se vincula un valor de cadena a la directiva; inputFormat todavía se usa al escribir valores en el editor y no tiene que estar en el mismo formato. Además, al vincular una cadena de solo fecha, la directiva evitará cambios de hora obligando a que la hora sea T00:00:00.

Tiempo solo

Las cadenas de solo tiempo normalmente no están definidas en la especificación ECMA; sin embargo, para permitir que la directiva se integre en escenarios que requieren soluciones de solo tiempo, admite el formato de 24 horas: HH:mm:ss. No se admite el formato de 12 horas. Tenga en cuenta también que esto se aplica sólo a los valores consolidados.

Cadena ISO completa

Si se vincula una cadena ISO completa, la directiva la analizará solo si se proporcionan todos los elementos requeridos por Date.parse.

Todos los valores falsos, incluido InvalidDate, se analizarán como null. Las cadenas ISO completas o de solo fecha, solo de hora o incompletas se analizarán como InvalidDate.

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.
Flecha arriba / abajo: incrementa/disminuye partes de fecha. Ver spinLoop relacionado
Ctrl / Cmd +;- establecer el día y la hora actuales en el editor.

Examples

Display and input format

IgxDateTimeEditor admite diferentes formatos de visualización y entrada.

Utiliza DatePipe de Angular, lo que le permite admitir opciones de formato predefinidas, como shortDate y longDate. También puede aceptar una cadena de formato construida utilizando caracteres admitidos por DatePipe, por ejemplo, EE/MM/yyyy. Tenga en cuenta que formatos como shortDate, longDate, etc., se pueden usar solo como displayFormat. Además, si no se proporciona displayFormat, el editor utilizará inputFormat como displayFormat.

Para establecer un formato de entrada específico, páselo como una cadena a la directiva IgxDateTimeEditor. Esto establecerá tanto el formato de entrada del usuario esperado como la máscara para el editor. Además, inputFormat se basa en la configuración regional, por lo que si no se proporciona ninguno, el editor utilizará de forma predeterminada el utilizado por el navegador.

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

La siguiente tabla muestra los formatos admitidos por el inputFormat de la directiva:

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.

Note

La directiva IgxDateTimeEditorDirective admite la entrada de IME. Al escribir una entrada en un idioma asiático, el control mostrará las composiciones de los métodos de entrada y las listas de candidatos directamente en el área de edición del control e inmediatamente redistribuirá el texto circundante cuando finalice la composición.

Min max value

Puede especificar las propiedades minValue y maxValue 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>

Las entradas minValue y minValue también pueden ser de tipo string, consulte Enlace a cadenas ISO.

Increment and decrement

La directiva igxDateTimeEditor expone métodos públicos increment y decrement. Incrementan o disminuyen una DatePart específica de la fecha y hora actualmente configuradas y se pueden usar de varias maneras.

En el primer escenario, si no se pasa ningún DatePart específico al método, un DatePart predeterminado aumentará o disminuirá, según el inputFormat especificado y la implementación de la directiva interna. En el segundo escenario, puede especificar explícitamente qué DatePart manipular, ya que puede satisfacer diferentes requisitos. Además, ambos métodos aceptan un parámetro delta opcional de tipo number que se puede utilizar para establecer el paso de incremento/disminución.

Puede comparar ambos en el siguiente ejemplo:

Además, spinDelta es una propiedad de entrada de tipo DatePartDeltas y se puede utilizar para aplicar un delta diferente a cada segmento de fecha y hora. Se aplicará al girar con el teclado, así como al girar con los métodos increment y decrement, siempre y cuando no tengan proporcionado el parámetro delta ya que tendrá prioridad sobre spinDelta.

In Angular Forms

La directiva del editor de fecha y hora admite todas las directivas de formulario del núcleo FormsModule NgModel y ReactiveFormsModule (FormControl, FormGroup, etc.). Esto también incluye las funciones Validators de formularios. El siguiente ejemplo ilustra el uso del validador required en un formulario basado en plantilla.

Note

Si es necesario, puede volver a un estado válido manejando el evento validationFailed y cambiando la propiedad newValue 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>

Text Selection

Puede forzar al componente a seleccionar todo el texto de entrada enfocado usando igxTextSelection. Encuentre más información sobre igxTextSelection en Label & Input.

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

Note

Para que el componente funcione correctamente, es fundamental configurar igxTextSelection después de la directiva igxDateTimeEditor. La razón de esto es que ambas directivas operan en el evento focus de entrada, por lo que la selección de texto debe realizarse después de configurar la máscara.

Estilismo

Para obtener más información, consulta la Input Group styling guide.

API References

Additional Resources

Temas relacionados:

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

Directiva del editor de fecha y hora Angular

Angular Date Time Editor Directive Example

Getting Started with Angular Date Time Editor Directive

Using the Angular Date Time Editor Directive

Binding

Enlace a cadenas ISO

Solo cita

Tiempo solo

Cadena ISO completa

Keyboard Navigation

Examples

Display and input format

Note

Min max value

Increment and decrement

In Angular Forms

Note

Text Selection

Note

Estilismo

API References

Additional Resources

Tematización