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
Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.
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
cmd
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 {}
typescript
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();
}
typescript
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();
typescript
<igx-input-group>
<input type="text" igxInput igxDateTimeEditor [value]="date" />
</igx-input-group>
html
Para crear un enlace de datos bidireccional, configure un ngModel
:
<igx-input-group>
<input type="text" igxInput igxDateTimeEditor [(ngModel)]="date"/>
</igx-input-group>
html
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, incluso InvalidDate
se analizarán como null
. Las cadenas incompletas de solo fecha, solo hora o completas ISO
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 Angular 's, lo que le permite admitir opciones de formato predefinidas DatePipe
, como shortDate
y longDate
. También puede aceptar una cadena de formato construido utilizando caracteres admitidos por el DatePipe
, p. ej EE/MM/yyyy
. Tenga en cuenta que los formatos como shortDate
, longDate
, etc., se pueden usar como displayFormat
sólo. Además, si no se proporciona ninguno displayFormat
, el editor usará el inputFormat
tal como es displayFormat
. Alternativamente, si no se establece la inputFormat
propiedad, el formato de entrada se inferirá de la displayFormat
en caso de que se pueda analizar como si solo contuviera partes numéricas de fecha y hora.
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>
html
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. |
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);
typescript
<igx-input-group>
<input type="text" igxInput igxDateTimeEditor [minValue]="minDate" [maxValue]="maxDate" [(ngModel)]="date"/>
</igx-input-group>
html
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.
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>
html
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>
html
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.