Diretiva do Editor de Data e Hora Angular

A Diretiva do Editor de Data e Hora Ignite UI for Angular permite que o usuário defina e edite a data e a hora em um elemento de entrada escolhido. O usuário pode editar a parte da data ou hora, usando uma entrada mascarada editável. Além disso, é possível especificar um formato de exibição e entrada desejado, bem como valores mínimo e máximo para utilizar a validação.

Angular Date Time Editor Directive Example

Getting Started with Angular Date Time Editor Directive

Para começar a usar a diretiva Ignite UI for Angular Date Time Editor, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

ng add igniteui-angular

Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

O próximo passo é importar o IgxDateTimeEditorModule no seu arquivo 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 {}

Como alternativa, a partir da 16.0.0 você pode importar o IgxDateTimeEditorDirective como uma dependência autônoma.

// 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();
}

Agora que você importou o módulo ou a diretiva Ignite UI for Angular Date Time Editor, você pode começar a usar a diretiva igxDateTimeEditor.

Using the Angular Date Time Editor Directive

Para usar uma entrada como um editor de data e hora, defina uma diretiva igxDateTimeEditor e um objeto de data válido como valor. Para ter uma aparência e comportamento de editor completos, envolva a entrada em um igx-input-group. Isso permitirá que você não apenas aproveite as seguintes diretivas igxInput, igxLabel, igx-prefix, igx-suffix, igx-hint, mas também cobrirá cenários comuns ao lidar com entradas de formulário.

Binding

Um cenário de configuração básica definindo um objeto Date como um value:

public date = new Date();

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

Para criar uma ligação de dados bidirecional, defina um ngModel:

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

Ligação a strings ISO

A IgxDateTimeEditorDirective aceita strings ISO 8601.

A sequência pode ser uma sequência ISO completa, no formato YYYY-MM-DDTHH:mm:ss.sssZ, ou pode ser separada em partes somente de data e somente de hora.

Somente data

Se uma string somente de data for vinculada à diretiva, ela precisa seguir o formato -YYYY-MM-DD. Isso se aplica somente ao vincular um valor de string à diretiva, o inputFormat ainda é usado ao digitar valores no editor e não precisa estar no mesmo formato. Além disso, ao vincular uma string somente de data, a diretiva impedirá mudanças de tempo forçando o tempo a ser T00:00:00.

Somente tempo

Strings somente de tempo normalmente não são definidas na especificação ECMA, no entanto, para permitir que a diretiva seja integrada em cenários que exigem soluções somente de tempo, ela suporta o formato de 24 horas -HH:mm:ss. O formato de 12 horas não é suportado. Observe também que isso se aplica somente a valores vinculados.

Sequência ISO completa

Se uma string ISO completa for vinculada, a diretiva a analisará somente se todos os elementos exigidos por Date.parse forem fornecidos.

Todos os valores falsos, incluindo InvalidDate serão analisados como null. Strings incompletas somente de data, somente de hora ou ISO completas serão analisadas como InvalidDate.

O Date Time Editor Directive possui navegação intuitiva pelo teclado que facilita o incremento, o decremento ou o salto entre diferentes DateParts, entre outros, sem precisar tocar no mouse.

Ctrl / Cmd + Seta para a esquerda / direita- navega entre as seções de data. Em Ctrl / Cmd + Direita, ele vai para o fim da seção. Se já estiver lá, ele vai para o fim da próxima seção, se houver. Ele funciona de forma semelhante na direção oposta.
Seta para cima / baixo- incrementa/decrementa partes de data. Veja spinLoop relacionado
Ctrl / Cmd +;- define o dia e a hora atuais no editor.

Examples

Display and input format

O IgxDateTimeEditor suporta diferentes formatos de exibição e entrada.

Ele usa DatePipe do Angular, que permite que ele suporte opções de formato predefinidas, como shortDate e longDate. Ele também pode aceitar uma string de formato construída usando caracteres suportados pelo DatePipe, por exemplo, EE/MM/yyyy. Observe que formatos como shortDate, longDate, etc., podem ser usados apenas como displayFormat. Além disso, se nenhum displayFormat for fornecido, o editor usará o inputFormat como seu displayFormat. Alternativamente, se a propriedade inputFormat não estiver definida, o formato de entrada será inferido do displayFormat caso ele possa ser analisado como contendo apenas partes numéricas de data e hora.

Para definir um formato de entrada específico, passe-o como uma string para a diretiva IgxDateTimeEditor. Isso definirá tanto o formato de entrada esperado do usuário quanto a máscara para o editor. Além disso, o inputFormat é baseado em localidade, então se nenhum for fornecido, o editor usará como padrão o usado pelo navegador.

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

A tabela abaixo mostra os formatos suportados pelo inputFormat da diretiva:

Formatar	Descrição
`d`	A data será convertida em zero à esquerda durante a edição.
`dd`	Data com um zero à esquerda explicitamente definido.
`M`	Mês, será forçado com um zero à esquerda durante a edição.
`MM`	Mês com um zero à esquerda explicitamente definido.
`yy`	Formato de ano curto.
`yyyy`	Formato de ano inteiro.
`h`	Horas no formato de 12 horas serão marcadas com um zero à esquerda durante a edição.
`hh`	Horas no formato de 12 horas com um zero à esquerda explicitamente definido.
`H`	Horas no formato de 24 horas serão forçadas com um zero à esquerda durante a edição.
`HH`	Horas no formato de 24 horas, com um zero à esquerda explicitamente definido.
`m`	Os minutos serão marcados com um zero à esquerda durante a edição.
`mm`	Minutos com um zero à esquerda explicitamente definido.
`tt`	Seção AM/PM para formato de 12 horas.

Note

A diretiva IgxDateTimeEditorDirective suporta entrada IME. Ao digitar uma entrada de idioma asiático, o controle exibirá composições de método de entrada e listas de candidatos diretamente na área de edição do controle e imediatamente refluirá o texto ao redor quando a composição terminar.

Min max value

Você pode especificar as propriedades minValue e maxValue para restringir a entrada e controlar a validade do 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>

As entradas minValue e minValue também podem ser do tipo string, veja Vinculação a strings ISO.

Increment and decrement

A diretiva igxDateTimeEditor expõe métodos públicos increment e decrement. Eles incrementam ou decrementam um DatePart específico da data e hora atualmente definidas e podem ser usados de algumas maneiras.

No primeiro cenário, se nenhuma DatePart específica for passada para o método, uma DatePart padrão será incrementada ou decrementada, com base no inputFormat especificado e na implementação da diretiva interna. No segundo cenário, você pode especificar explicitamente qual DatePart manipular, pois pode atender a diferentes requisitos. Além disso, ambos os métodos aceitam um parâmetro delta opcional do tipo number que pode ser usado para definir a etapa de incremento/decremento.

Você pode comparar ambos no exemplo a seguir:

Além disso, spinDelta é uma propriedade de entrada do tipo DatePartDeltas e pode ser usada para aplicar um delta diferente a cada segmento de data e hora. Ele será aplicado ao girar com o teclado, bem como ao girar com os métodos de increment e decrement, desde que eles não tenham o parâmetro delta fornecido, pois ele terá precedência sobre spinDelta.

In Angular Forms

A Date Time Editor Directive suporta todas as diretivas de formulário do FormsModule NgModel e ReactiveFormsModule principais (FormControl, FormGroup, etc.). Isso também inclui as funções Forms Validators. O exemplo a seguir ilustra o uso do validador required em um Form orientado a Template.

Note

Se necessário, você pode reverter para um estado válido manipulando o evento validationFailed e alterando a propriedade newValue dos argumentos disponíveis.

Exemplo de formulário baseado em modelo:

<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

Você pode forçar o componente a selecionar todo o texto de entrada em foco usando igxTextSelection. Encontre mais informações sobre igxTextSelection em Label & Input.

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

Note

Para que o componente funcione corretamente, é crucial definir igxTextSelection após a diretiva igxDateTimeEditor. O motivo para isso é que ambas as diretivas operam no evento focus de entrada, então a seleção de texto deve acontecer após a máscara ser definida.

Estilização

Para mais detalhes, confira o Input Group styling guide.

API References

Additional Resources

Tópicos relacionados:

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

Diretiva do Editor de Data e Hora Angular

Angular Date Time Editor Directive Example

Getting Started with Angular Date Time Editor Directive

Using the Angular Date Time Editor Directive

Binding

Ligação a strings ISO

Somente data

Somente tempo

Sequência ISO completa

Keyboard Navigation

Examples

Display and input format

Note

Min max value

Increment and decrement

In Angular Forms

Note

Text Selection

Note

Estilização

API References

Additional Resources

Temas