Visão geral do Web Components XDate Picker

    O componente XDate Picker permite que os usuários usem uma interface de usuário de calendário suspensa, permitindo a seleção intuitiva de um dia, mês e ano. Isso pode ser útil quando um usuário do aplicativo precisa selecionar datas específicas, e vários editores podem ser combinados para criar uma interface do usuário de intervalo de datas.

    [!WARNING] The XDatePicker component is deprecated from version 5.0.0 of Ignite UI for Web Components. For the latest supported Ignite UI for Web Components Date Picker component refer to its respective page under "Scheduling".

    Web Components XDate Picker Example

    Este exemplo demonstra como criar XDatePicker com a opção de selecionar uma única data.

    Dependencies

    Ao instalar o componente XDate Picker, os pacotes core e inputs também devem ser instalados.

    npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-inputs
npm install --save igniteui-webcomponents-layouts

    Component Modules

    O componente Seletor XDate requer que os seguintes módulos sejam registrados:

    import { IgcXDatePickerModule } from 'igniteui-webcomponents-inputs';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(IgcXDatePickerModule);

    Usage

    O componente do editor Web Components XDate Picker consiste em três partes padrão - a área de texto, um botão suspenso de calendário e um botão de limpeza. Essas áreas são descritas abaixo:

    • Área de texto: exibe a data selecionada, armazenada na Value propriedade do editor.

    • Calendário: Clicar no botão de calendário abrirá o menu suspenso de calendário do Seletor XDate. O calendário será aberto para mostrar o mês do selecionado Value no momento, se houver. Se a Value não for especificado, o calendário mostrará o mês correspondente à data atual. O mês na parte superior pode ser clicado para mostrar uma lista de meses, e o mesmo se aplica ao ano. Há também botões de seta à esquerda e à direita da visualização do mês e do ano que incrementarão e diminuirão o mês mostrado cronologicamente.

    • Botão Limpar: O ícone 'x' limpará o valor atual.

    Propriedade Tipo Descrição
    IconColor corda Altera a cor do botão do calendário.
    AllowTextInput bool O valor do seletor xdate pode ser digitado e modificado alternando essa propriedade para true.
    DateFormat enumeração O padrão é DateShort, por exemplo, 'mm/dd/aaaa'. Quando definido como DateLong, a data exibida no editor aparecerá como, por exemplo, quarta-feira, 14 de abril de 2021.
    FirstDayOfWeek enumeração O padrão é domingo. Um determinado dia da semana será usado como o primeiro dia em cada linha semanal do calendário, por exemplo, de segunda a domingo.
    FormatString corda Quando DateShort é usado, o formato da data pode ser configurado, por exemplo, 'dd/mm/aaaa'. Observe que, se oDateFormat for DateLong eFormatString estiver definido, oDateFormat será ignorado.
    Label corda Exibe texto personalizado acima da data no canto superior esquerdo do Seletor XDate.
    MinDate Data e hora Restringe a seleção ou visualização de datas anteriores.
    MaxDate Data e hora Restringe a seleção ou visualização de datas posteriores.
    Placeholder corda Uma sequência de caracteres personalizada a ser exibida quando o valor na parte de edição do calendário for apagado.
    ShowClearButton bool O padrão é true, o botão limpar está diretamente à esquerda do botão de calendário, visualizado por um X. Quando clicado, ele limpará oValue do Seletor XDate. A visibilidade do botão de limpeza pode ser ativada e desativada.
    ShowTodayButton bool O hoje está diretamente abaixo das datas quando o calendário é aberto. Quando clicado, ele selecionará a data atual. A visibilidade do botão hoje pode ser ligada e desligada.
    ShowWeekNumbers bool Os números das semanas podem ser exibidos como um número, à esquerda de cada linha de datas, na parte suspensa do Seletor XDate. A visibilidade do número da semana pode ser ativada e desativada.
    FirstWeekOfYear enumeração Configura os números do início da semana para o ano inteiro. Pode ser definido como FirstDay, FirstFourDayWeek, FirstFullWeek.
    OpenOnFocus bool Por padrão, a parte suspensa do Seletor XDate é aberta com um único clique, forçando o usuário a clicar no botão de calendário para abrir o calendário.
    Value data Define o valor do Seletor XDate e o seleciona no calendário suspenso.

    Os usuários também podem personalizar a fonte do Seletor XDate usando as várias propriedades de texto do controle. Eles são: TextColor, TextFontFamily, TextFontSize, TextFontStyle, e TextFontWeight.

    Edição

    O exemplo a seguir demonstra como habilitar a edição no XDatePicker.

    Date Limits

    O exemplo a seguir demonstra como restringir datas selecionadas no XDatePicker.

    Date Formats

    O exemplo a seguir demonstra como aplicar uma data longa no XDatePicker.

    Date Ranges

    O exemplo a seguir demonstra como combinar vários XDatePicker controles.

    API References

    A seguir está uma lista de membros da API mencionados nas seções acima:

    • XDatePicker
    • IconColor
    • AllowTextInput
    • DateFormat
    • FirstDayOfWeek
    • FormatString
    • Label
    • MinDate
    • MaxDate
    • Placeholder
    • ShowClearButton
    • ShowTodayButton
    • ShowWeekNumbers
    • FirstWeekOfYear
    • OpenOnFocus
    • Value
    • TextColor
    • TextFontFamily
    • TextFontSize
    • TextFontStyle
    • TextFontWeight