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 a usar o IgbDatePicker 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 ao IgbDatePicker componente. O seguinte precisa ser colocado no arquivo wwwroot/index.html em um projeto de Assembly da Web do Blazor ou no arquivo Pages/_Host.cshtml em um projeto do Blazor Server:

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

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

Using the Blazor Date Picker Component

Display Date Picker

Para instanciar um IgbDatePicker em seu estado padrão dropdown, use o seguinte código:

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

Options

The IgbDatePicker can be bound to a date.

<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 calendário e o ícone de limpeza podem ser modelados usando os calendar 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 modelados usando o actions slot:

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

Keyboard Navigation

Possui IgbDatePicker navegação intuitiva pelo teclado que facilita incrementar, diminuir ou pular entre diferentes DateParts, entre outros, sem a necessidade de 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

O IgbDatePicker também suporta um dialog modo:

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

Display and input format

InputFormat e DisplayFormat são propriedades que podem ser definidas para fazer com que o editor do seletor siga um formato especificado. O InputFormat é baseado em localidade, portanto, se nenhum for fornecido, o seletor será padronizado para o usado pelo navegador.

Uma boa coisa a notar é que o componente Seletor de data sempre adicionará um zero à esquerda nas date partes e month se elas forem fornecidas em um formato que não o tenha, por exemplo d/M/yy, torna-se dd/MM/yy. Isso se aplica apenas durante a edição.

DisplayFormat é usado para formatar a entrada do seletor quando ele não está focado. Se não DisplayFormat for fornecido, o seletor usará o InputFormat as its DisplayFormat.

Mais informações sobre eles podem ser encontradas na seção de IgbDateTimeInput formato.

Increment and decrement

As IgbDatePicker exposições StepUp e StepDown métodos. Ambos vêm do IgbDateTimeInput e podem ser usados para incrementar e diminuir um específico DatePart da data definida no momento.

<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

O IgbDatePicker pode ser usado em um elemento de formulário, o componente e Max as propriedades atuam como validadores de Min formulário.

Nos formulários, podemos lidar com o Change evento do componente e atualizar o valor do rótulo.

Calendar Specific settings

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

Internationalization

A localização do IgbDatePicker pode ser controlada por meio de sua Locale entrada.

Aqui está como uma definição de IgbDatePicker localidade com japonês seria:

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

Styling

O IgbDatePicker componente deriva do IgbInput componente e IgbCalendar, portanto, expõe todas as partes CSS disponíveis. Consulte Estilo de entrada e Estilo de calendário 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);
}

API References

• IgbInput
• IgbCalendar
• IgbDatePicker
• Styling & Themes

Additional Resources

• Ignite UI for Blazor Fóruns
• Ignite UI for Blazor GitHub