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
.
Keyboard Navigation
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
relacionadoCtrl / 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
- Directiva IgxDateTimeEditor
- Directiva IgxHint
- DirectivaIgxInput
- Componente IgxInputGroup
- Estilos de componentes IgxInputGroup
Additional Resources
Temas relacionados:
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.