Visão geral do componente Seletor de data do Blazor

O Seletor de Data Ignite UI for Blazor é um componente rico em recursos usado para inserir uma data por meio da entrada manual de texto ou escolher valores de data em uma caixa de diálogo de calendário que aparece. Leve e simples de usar, o Seletor de datas permite que os usuários naveguem até a data desejada com várias opções de visualização – mês, ano e década. Ele também oferece suporte a propriedades de validação comuns, como restrições de data mínima e máxima e campos obrigatórios.

O componente Seletor de data Ignite UI for Blazor permite que os usuários escolham uma única data por meio de um menu suspenso de calendário de exibição mensal ou campo de entrada editável. O Seletor de Data Blazor também oferece suporte a um modo de diálogo para seleção somente no calendário, formatação de data personalizável e com reconhecimento de localidade e integração de validação.

Note

The IgbDatePicker is a brand new component from Ignite UI for Blazor version . The old IgbDatePicker prior to this version has been renamed to XDatePicker and its respective documentation page can be found under "Deprecated Components"

Blazor Date Picker Example

Abaixo, você pode ver um exemplo que demonstra como o Seletor de Data funciona quando os usuários podem escolher uma data por meio de uma entrada de texto manual e clicar no ícone de calendário à esquerda para navegar até ela. Veja como renderizá-lo.

Getting Started with Blazor Date Picker

Para começar com oIgbDatePicker componente, primeiro precisamos registrar seu módulo da seguinte forma:

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule));

Você também precisará vincular um arquivo CSS adicional para aplicar o estilo aoIgbDatePicker componente. O seguinte deve ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

Para uma introdução completa ao Ignite UI for Blazor, leia o tópico Comecando.

Using the Blazor Date Picker Component

Display Date Picker

Para instanciar aIgbDatePicker em seu estado padrãodropdown, use o seguinte código:

<IgbDatePicker @ref="DatePicker"></IgbDatePicker>

Options

OIgbDatePicker pode ser vinculado a umdate.

<IgbDatePicker @ref="DatePicker" Value="@SelectedDate">
</IgbDatePicker>

@code {

    public DateTime SelectedDate { get; set; }
    public IgbDatePicker DatePicker { get; set; }

    protected override void OnInitialized()
    {
        this.SelectedDate = DateTime.Today;
    }
}

Projecting components

Com slots de prefixo e sufixo, podemos adicionar conteúdo diferente antes e depois do conteúdo principal da entrada.

<IgbDatePicker @ref="DatePicker">
    <IgbIcon
        Slot="suffix"
        IconName="arrow_upward"
        Collection="bootstrap"
        Class="small"
        @onclick="() => DatePicker.StepUp(DatePart.Month)">
    </IgbIcon>
</IgbDatePicker>

O snippet acima adicionará um ícone adicional no final da entrada, logo após o ícone de limpeza padrão. Isso não removerá o ícone de alternância padrão, pois prefixos e sufixos podem ser empilhados um após o outro.

Personalizando os ícones de alternância e limpeza

O ícone do calendário e do clear pode ser modelado usando oscalendar slots e:clear

<IgbDatePicker>
    <IgbIcon Slot="calendar" IconName="calendar" Collection="material" Class="small"></IgbIcon>
    <IgbIcon Slot="clear" IconName="delete" Collection="material" Class="small"></IgbIcon>
</IgbDatePicker>

Botões de ação personalizados

Os botões de ação do seletor podem ser templateados usando oactions slot:

<IgbDatePicker>
    <IgbButton Slot="actions" @onclick="() => DatePicker.ShowWeekNumbers = true">Show Week Numbers</IgbButton>
</IgbDatePicker>

EleIgbDatePicker tem uma navegação intuitiva por teclado que facilita incrementar, diminuir ou pular entre diferentes DateParts, entre outros, sem precisar tocar no mouse.

Chaves	Descrição
`←`	Mover um caractere para o início
`→`	Mover um caractere para o final
`CASA`	Mover para o início
`FIM`	Mover para o final
`CTRL` / `CMD` + `←`	Mover para o início da seção de data/hora - atual ou esquerda
`CTRL` / `CMD` + `→`	Mover para o final da seção de data/hora - atual ou à direita
Foco em uma parte de data/hora + `↓`	Decrementa uma parte de data/hora
Foco em uma parte de data/hora + `↑`	Incrementa uma parte de data/hora
`CTRL` / `CMD` +`;`	Define a data/hora atual como o valor do editor
`ESC`	Fecha o pop-up do calendário e foca o campo de entrada

Examples

Dialog Mode

TambémIgbDatePicker suporta umdialog modo:

<IgbDatePicker Mode="PickerMode.Dialog"></IgbDatePicker>

Display and input format

InputFormateDisplayFormat são propriedades que podem ser definidas para fazer o editor do seletor seguir um formato especificado. EleInputFormat é baseado em localidade, então, se não houver nenhum local, o seletor será usado por padrão no que o navegador usa.

Uma coisa boa a notar é que o Componente Date Picker sempre adicionará um zero inicial nasdate partes emonth se forem fornecidas em um formato que não tenha isso, por exemplo, .d/M/yy becomesdd/MM/yy. Isso se aplica apenas durante a edição.

DisplayFormaté usado para formatar a entrada do seletor quando não está focada. Se nãoDisplayFormat for fornecido, o selecionador usará oInputFormat como se fosseDisplayFormat

Mais informações sobre esses podem ser encontradas naIgbDateTimeInput seção de formato.

Increment and decrement

AsIgbDatePicker exposiçõesStepUp eStepDown os métodos. Ambos vêm doIgbDateTimeInput e podem ser usados para incrementar e decrementar uma data específicaDatePart da data atualmente definida.

<IgbDatePicker @ref="DatePicker">
    <IgbIcon
        Slot="prefix"
        IconName="arrow_upward"
        Collection="material"
        @onclick="() => DatePicker.StepUp(DatePart.Month)">
    </IgbIcon>
    <IgbIcon
        Slot="suffix"
        IconName="arrow_downward"
        Collection="material"
        @onclick="() => DatePicker.StepDown(DatePart.Month)">
    </IgbIcon>
</IgbDatePicker>

In Forms

PodemIgbDatePicker ser usados em um elemento de forma, os componentesMin eMax propriedades atuam como validadores de forma.

Em formulários, podemos gerenciar oChange evento do componente e atualizar o valor do rótulo.

Calendar Specific settings

ElesIgbDatePicker podem modificar algumas configurações do calendário por meio das propriedades que o Seletor de Data expõe. Alguns deles incluemVisibleMonths que permite que mais de um calendário seja exibido quando o selecionador expande,WeekStart que determina o dia de início da semana,ShowWeekNumbers que mostra o número de cada semana do ano e mais.

Internationalization

A localização doIgbDatePicker pode ser controlada por meio de suaLocale entrada.

Veja como seria umaIgbDatePicker definição de local japonesa:

<IgbDatePicker Locale="ja-JP"></IgbDatePicker>

Styling

OIgbDatePicker componente deriva doIgbInput componente e,IgbCalendar expondo todas as partes CSS disponíveis. Veja Input Styling e Calendar Styling para referência.

igc-date-picker::part(header) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}
igc-date-picker::part(calendar-content) {
  background-color: var(--ig-surface-300);
}
igc-date-picker::part(date-inner current) {
  color: var(--ig-info-300);
  background-color: var(--ig-surface-300);
}
igc-date-picker::part(navigation-button):hover,
igc-date-picker::part(months-navigation):hover,
igc-date-picker::part(years-navigation):hover {
  color: var(--ig-secondary-500);
}
igc-date-picker::part(month-inner current),
igc-date-picker::part(year-inner current),
igc-date-picker::part(navigation-button),
igc-date-picker::part(months-navigation),
igc-date-picker::part(years-navigation) {
  color: var(--ig-info-300);
}
igc-date-picker::part(date-inner selected),
igc-date-picker::part(month-inner selected),
igc-date-picker::part(year-inner selected) {
  color: var(--ig-secondary-500-contrast);
  background-color: var(--ig-secondary-500);
}