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.

    Exemplo de Diretiva de Editor de Data e Hora Angular

    Começando com Angular diretriz de editor de data e hora

    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 issoIgxDateTimeEditorModule no seu arquivo 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 você pode importar comoIgxDateTimeEditorDirective uma dependência independente.

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

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

    Usando a Diretiva Angular Editor de Data e Hora

    Para usar uma entrada como editor de data-hora, defina uma diretiva igxDateTimeEditor e um objeto data válido como valor. Para que o editor tenha uma aparência completa e sensação, envolva a entrada em um grupo de entrada igx. Isso permitirá que você não apenas aproveite as seguintes diretrizesigxInput,igxLabel,igx-prefix,igx-suffix,igx-hint, mas também cobre cenários comuns ao lidar com entradas de formulário.

    Ligação

    Um cenário básico de configuração definindo um objeto Date comovalue:

    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 umngModel:

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

    Ligação a strings ISO

    AceitaIgxDateTimeEditorDirective umISO 8601 fio.

    A string pode ser uma string completaISO, no formatoYYYY-MM-DDTHH:mm:ss.sssZ, ou pode ser separada em partes apenas por data e apenas por hora.

    Somente data

    Se uma string apenas de data for vinculada à diretiva, ela precisa seguir o formato -YYYY-MM-DD. Isso se aplica apenas ao vincular um valor de string à diretiva, oinputFormat ainda é usado ao digitar valores no editor e não precisa estar no mesmo formato. Além disso, ao vincular uma sequência apenas de data, a diretiva evitará deslocamentos temporais ao forçar o horário a serT00:00:00.

    Somente tempo

    Cadeias de tempo apenas normalmente não são definidas naECMA especificação, porém, para permitir a integração da diretiva em cenários que exigem soluções de tempo único, ela suporta o formato de 24 horas -HH:mm:ss. O formato de 12 horas não é suportado. Por favor, note também que isso se aplica apenas a valores vinculados.

    Sequência ISO completa

    Se uma cadeia completaISO for vinculada, a diretiva só a analisará se todos os elementos necessários porDate.parse forem fornecidos.

    Todos os valores falsos, incluindoInvalidDate serão analisados comonull. Sequências incompletas de data apenas, apenas tempo ou completasISO serão analisadas comoInvalidDate.

    Navegação pelo teclado

    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.

    • Arrow Up / Down- porções de datação de incremento/decremento. Veja relacionadospinLoop

    • Ctrl / Cmd +;- define o dia e a hora atuais no editor.

    Exemplos

    Formato de exibição e entrada

    EleIgxDateTimeEditor suporta diferentes formatos de exibição e entrada.

    Ele usa Angular 'DatePipes, o que permite suportar opções de formato pré-definidas, comoshortDate elongDate. Também pode aceitar uma string de formato construída usando caracteres suportados porDatePipe, por exemploEE/MM/yyyy, Note que formatos comoshortDate,longDate, etc., podem ser usados apenas comodisplayFormat. Além disso, se nãodisplayFormat for fornecido, o editor usará oinputFormat como se fossedisplayFormat o nome. Alternativamente, se ainputFormat propriedade não estiver definida, o formato de entrada será inferido adisplayFormat partir do caso possa ser analisado como contendo apenas partes numéricas de data-hora.

    Para definir um formato de entrada específico, passe como uma string para a diretiva IgxDateTimeEditor. Isso definirá tanto o formato esperado de entrada do usuário quanto a máscara para o editor. Além disso, éinputFormat baseado em localização, então, se não houver nenhum local, o editor irá usar o navegador por padrão.

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

    A tabela abaixo mostra formatos suportados pelas diretivasinputFormat:

    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.
    Observação

    AIgxDateTimeEditorDirective diretiva suporta a entrada do IME. Ao digitar uma entrada em língua asiática, o controle exibe composições de métodos de entrada e listas de candidatos diretamente na área de edição do controle, e imediatamente refaz o fluxo ao redor do texto ao final da composição.

    Valor mínimo máximo

    Você pode especificarminValue propriedades paramaxValue 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>

    AsminValue entradas eminValue também podem ser do tipostring, veja Binding to ISO strings.

    Incremento e decremento

    igxDateTimeEditorDiretiva expõe o públicoincrement edecrement os métodos. Eles incrementam ou diminuem uma data eDatePart hora específicas e podem ser usadas de algumas maneiras.

    No primeiro cenário, se nenhum específicoDatePart for passado ao método, um padrãoDatePart irá incrementar ou decrementar, com base na implementação da diretiva especificadainputFormat e da diretiva interna. No segundo cenário, você pode especificar explicitamente o queDatePart manipular, pois pode atender a diferentes requisitos. Além disso, ambos os métodos aceitam um parâmetro opcionaldelta do tiponumber que pode ser usado para definir o passo de incremento/decremento.

    Você pode comparar ambos no exemplo a seguir:

    Além disso,spinDelta é uma propriedade de entrada do tipoDatePartDeltas e pode ser usada para aplicar um delta diferente a cada segmento de data-tempo. Ele será aplicado ao girar com o teclado, assim como ao girar com osincrement métodos e,decrement desde que não tenham odelta parâmetro fornecido, pois ele terá precedênciaspinDelta.

    Em Angular Formas

    A Diretiva Editor de Data e Hora suporta todas as diretivas de formulário do núcleo FormsModuleNgModel eReactiveFormsModule (FormControl, FormGroup, etc.). Isso também inclui as funções FormuláriosValidators. O exemplo a seguir ilustra o uso dorequired validador em um Formulário baseado em Template.

    Observação

    Se necessário, você pode reverter para um estado válido lidando com ovalidationFailed evento e alterando anewValue propriedade 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>

    Seleção de texto

    Você pode forçar o componente a selecionar todo o texto de entrada no foco usandoigxTextSelection isso. Encontre mais informações emigxTextSelection​ ​Label & Input.

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

    Para que o componente funcione corretamente, é crucial definirigxTextSelection após aigxDateTimeEditor diretiva. O motivo para isso é que ambas as diretivas operam sobre o evento de entradafocus, então a seleção de texto deve acontecer depois que a máscara está definida.

    Estilização

    Para mais detalhes, confira oInput Group styling guide.

    Referências de API

    Recursos adicionais

    Tópicos relacionados:

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.