O input datepicker permite que os usuários selecionem uma data de um calendário personalizável e digitem a data diretamente no input com suporte completo à internacionalização.
O FormKit utiliza uma solução de mascaramento única para permitir que os usuários digitem datas no input do datepicker (limitando as opções disponíveis apenas para valores válidos) ou selecionem sua data através de um input de calendário.
Para mostrar um placeholder no modo de entrada dupla, você deve habilitar a máscara overlay. Isso não é necessário com picker-only ativado. Saiba mais sobre máscaras e overlays aqui.
Você pode desativar o mecanismo de entrada de texto e garantir que alguém use o diálogo do datepicker para inserir sua data adicionando a propriedade picker-only. No modo picker-only, clicar no input abrirá o diálogo imediatamente. Além disso, usar um overlay não é necessário para suporte de placeholder:
O datepicker suporta datas "estilizadas" com Intl.DateTimeFormat, bem como formatos de data baseados em tokens. Para alterar o formato exibido ao usuário, modifique a propriedade format.
Se o seu público é internacional, você deve considerar o uso de "datas estilizadas" já que elas são os formatos de data mais naturais em cada localidade. O formato padrão para um seletor de datas é long.
A propriedade format pode aceitar uma string simples como long ou medium, caso em que utiliza o correspondente Intl.DateTimeFormat dateStyle. Alternativamente, você pode fornecer um objeto com as propriedades date e time e seus respectivos estilos Intl.DateTimeFormat ({ date: 'long', time: 'short' }).
Ative qualquer um dos seguintes estilos de data com a propriedade format:
| Estilo de Formato | Exemplos |
|---|---|
| full | Wednesday, March 1, 2023, Mercoledì 1 marzo 2023 |
| long | March 1, 2023, 1 marzo 2023 |
| medium | Mar 6, 2023, 6 mar 2023 |
| short | 3/1/23, 1/3/23 |
| Estilo de Formato | Exemplos |
|---|---|
| long | 7:05:00 PM, 19:05:00 |
| medium | 7:05:00 PM, 19:05:00 |
| short | 7:05 PM, 19:05 |
Você pode usar a propriedade format para definir explicitamente um formato de data tokenizado. Um formato de token é representado por uma string com quaisquer caracteres arbitrários e uma ou mais das strings na tabela abaixo.
FormKit interage com o Intl.DateTimeFormat para internacionalizar automaticamente os tokens com base no locale atual. Por exemplo, o token MMMM para 2000-01-01 produziria January para o locale en, mas produziria 一月 para o locale zh.
É possível, ao usar tokens, criar datas não interpretáveis. Por exemplo, se a sua entrada exibir apenas o dia da semana (dddd). Você pode usar formatos de data não interpretáveis apenas no modo picker-only. Se você deseja permitir que seus usuários digitem sua data, seu formato deve incluir pelo menos um token de mês, dia e ano.
| Token | Exemplos | Descrição |
|---|---|---|
YY | 99, 23, 00 | Ano com 2 dígitos |
YYYY | 1999, 2023, 2100 | Ano com 4 dígitos |
M | 1, 12 | O mês de 1-12 |
MM | 01, 12 | O mês de 01-12 |
MMM | Jan, Feb | Nome abreviado de Jan-Dez |
MMMM | January, February | Nome completo de Janeiro - Dezembro |
D | 1, 9, 22 | O dia do mês de 1-31 |
DD | 01, 09, 22 | O dia do mês de 01-31 |
d | M, T, W, T, F, S, S | Dia da semana com um dígito "T" |
ddd | Thu, Sat | Nome abreviado do dia da semana "Thu" |
dddd | Monday, Tuesday | Nome completo do dia da semana "Wednesday" |
H | 0, 13, 23 | Dígitos mínimos da hora, 24 horas, 0-23 |
HH | 00, 13, 23 | 2 dígitos da hora, 24 horas, 00-23 |
h | 12, 1, 11 | Dígitos mínimos da hora, relógio de 12 horas, 1-12 |
hh | 12, 01, 11 | 2 dígitos da hora, relógio de 12 horas, 01-12 |
m | 1, 59 | O minuto de 0-59 |
mm | 01, 59 | O minuto de 00-59 |
s | 1, 59 | O segundo de 0-59 |
ss | 01, 59 | O segundo de 00-59 |
a | am, pm | am/pm |
A | AM, PM | AM/PM |
Embora o FormKit internacionalize seus tokens automaticamente — se o seu formulário é destinado a um público internacional amplo, considere usar estilos de data em vez de tokens, pois isso leva a uma data mais legível em muitas localidades.
Para incluir letras no seu formato que são elas mesmas tokens (como a), você pode escapar esses tokens com uma barra invertida \ antes do caractere:
O calendário popup do datepicker tem quatro "painéis":
day — Mostra uma visão tradicional do calendário de um mês com cada dia selecionável.month — Mostra os 12 meses do ano.year — Mostra uma década de anos de cada vez.time — Mostra a hora do dia.Quando um usuário abre o popup do datepicker, ele verá um ou mais desses painéis. Você pode modificar quais painéis são exibidos para o usuário e a sequência em que esses painéis devem ser exibidos fornecendo uma propriedade sequence. O valor padrão de sequence é ['day'] (o que permite navegar para os painéis month e year).
Por exemplo, ao selecionar uma data de nascimento, é natural primeiro selecionar o ano de nascimento, depois o mês e então o dia. A propriedade sequence permite esse comportamento:
O painel time pode ser usado para permitir que um usuário selecione uma hora específica do dia. Se você escolher um format que inclua a hora (como YYYY-MM-DD HH:mm), provavelmente desejará incluir o painel time na sua sequência:
Como todas as entradas, o value do datepicker é tanto o que é produzido pelo datepicker quanto o que é lido de volta para o datepicker para hidratação. Por padrão, o formato do valor é uma string normalizada para UTC no formato ISO8601 (exemplo: 2014-11-27T03:59:00.000Z). No entanto, esse formato pode ser alterado para qualquer um dos estilos de data suportados ou formatos de tokens listados acima usando a propriedade value-format.
Uma pergunta válida é por que não usar sempre ISO8601? Embora seja a maneira mais popular de trabalhar com datas — é legível por máquinas e humanos — não é muito legível por humanos. Por exemplo, se o seu formulário envia um e-mail de solicitação de contato para um serviço de catering, então ISO8601 provavelmente não seria a melhor escolha.
O formato do valor deve conter todos os dados necessários para reconstituir um objeto de data, no mínimo isso inclui mês, dia, ano. Se a sua entrada solicita informações do usuário que não estão representadas no seu formato de valor, esses detalhes serão perdidos.
Para usar um estilo de data como valor, simplesmente passe o estilo que você gostaria de usar para a propriedade value-format:
Valores também podem ser representados em qualquer formato arbitrário usando tokens de formatação:
Valores passados para um datepicker devem:
value-format no value-locale atual OU,Date nativo do JavaScript.Embora objetos Date nativos sejam sempre aceitos como entradas válidas para um datepicker, eles serão imediatamente transformados no value-format especificado.
value-formatDate nativoUma vez que o formato do valor precisa ser analisado usando o mesmo locale com o qual foi criado, é recomendado sempre especificar o value-locale ao definir um value-format personalizado. Isso garante que, não importa qual seja o locale do usuário que está inserindo a data, o valor permanecerá consistente:
Alterar o value-locale não tem efeito sobre o timezone da data escolhida. Veja a documentação sobre fuso horário abaixo para mais explicações.
Tempo é uma coisa notoriamente difícil de se trabalhar em qualquer ambiente de software, mas especialmente em JavaScript baseado em navegador. O datepicker oferece algumas opções para ajudar a contornar esses desafios.
Para trabalhar com datas e horas em JavaScript, é útil ter um entendimento básico do objeto Date. O objeto de data em JavaScript é fundamentalmente um timestamp Unix (número de milissegundos desde 1 de Jan de 1970 às 00:00:00Z). No entanto, ele é sempre localizado para o horário do cliente. Essa localização é expressa em um deslocamento de UTC. O horário atual do seu navegador é:
Quando o deslocamento é aplicado ao "horário do relógio", você chega ao horário atual em UTC:
Ao usar tokens value-format no datepicker, esses tokens operarão usando o fuso horário do cliente. Por exemplo, se o seu formato solicitar o token HH, ele retornaria:
Compare isso com as datas acima, e você verá que é o mesmo que a parte das horas do horário local. Por que isso importa? Continue lendo.
Vamos considerar um aplicativo de reservas para um restaurante localizado em Amsterdã (UTC +100/+200). É um destino popular para turistas e eles costumam fazer reservas várias semanas antes de viajarem (enquanto estão em seu país de origem).
O seletor de data, por padrão, pedirá ao turista a data e a hora de sua reserva desejada — mas (por padrão) a seleção será no horário local deles, não no horário de Amsterdã. Mesmo que o value-format esteja gerando UTC, o horário não será o horário pretendido para a reserva em Amsterdã (a menos que eles estejam no mesmo fuso horário).
Falando de maneira geral, existem 2 soluções para esse problema:
Use um horário "indeterminado" (às vezes referido como "wall time"). Um horário indeterminado é um horário sem uma correlação específica com um Timestamp Unix subjacente. Por exemplo, 14h do dia 13 de março não é UTC e não tem um deslocamento explícito. 14h do dia 13 de março descreve um horário específico em um local/fuso horário indeterminado. Você pode fazer isso com tokens de formato como (YYYY-MM-DD HH:mm) desde que você não use o deslocamento em seu valor (Z).
Isso funcionaria para o nosso aplicativo de restaurante, desde que um backend seja capaz de anexar um fuso horário ou deslocamento apropriado a esse horário indeterminado 2023-03-13 14:00 GMT+0100 para chegar ao horário UTC apropriado (o que esse aplicativo fictício requer em seu banco de dados). O desafio restante, para um desenvolvedor de backend, é saber qual deslocamento aplicar à data para garantir que ela se torne "horário de Amsterdã" (esse deslocamento varia com base na época do ano devido ao horário de verão em Europe/Amsterdam).
timezone do seletor de dataAlternativamente, a propriedade timezone do seletor de data realizará a correção de deslocamento automaticamente para você. Basta declarar "onde" o seletor de data está escolhendo o horário — no nosso exemplo timezone="Europe/Amsterdam". A experiência do usuário não mudará em nada, mas o horário que eles selecionarem estará no fuso horário alvo. Um usuário em America/New_York (+0400) que seleciona 14h do dia 13 de março em seu seletor de data, resultará em um valor UTC de 2023-03-13T13:00:00Z, que é 14h em Amsterdã. Isso permite o armazenamento e a hidratação simples da sua data usando um formato UTC.
Por padrão, o seletor de data usa o fuso horário local do cliente quando uma seleção é feita. O valor da saída é determinado pelo value-format (veja acima) — por padrão, isso é uma string ISO8601 normalizada para UTC. No entanto, especificando um formato personalizado, você pode alcançar um horário "indeterminado" (também chamado de "wall time"). Esta é uma data e/ou horário sem correlação específica com um fuso horário dado.
Por exemplo, quando você define um alarme no seu telefone para 8:00 AM — esse horário é "indeterminado" — ele não tem correlação com o fuso horário. Se você mora em Roma e viaja para Tóquio, seu alarme tocará às 8:00 AM em Tóquio da mesma forma que tocaria às 8:00 AM em Roma. É impossível representar isso como UTC.
Você pode alcançar um horário indeterminado com o seletor de data fornecendo nenhuma informação de fuso horário ou deslocamento em seu value-format — cabe ao intérprete da data adicionar essa informação. Os tokens em um value-format sempre geram valores locais do cliente — então, ao deixar qualquer dado de fuso horário ou deslocamento (Z) fora do valor, ele é inerentemente "indeterminado":
Para algumas aplicações, é necessário selecionar o horário em um local específico — isso pode ser bastante desafiador. Para ajudar a aliviar essa dificuldade, o seletor de datas suporta a capacidade de especificar explicitamente o timezone da entrada.
A propriedade timezone permite que você especifique a "localização" do seletor de datas com base nos fusos horários IANA suportados pelo navegador. Isso é importante quando você gostaria de permitir que os usuários selecionem uma data e hora em uma localização geográfica específica, não importando onde o cliente esteja. Alguns exemplos de casos de uso são:
Há várias situações em que o timezone não deve ser usado (padrão para o horário do cliente):
No exemplo abaixo, um usuário precisa retirar um carro alugado em Kolkata, Índia, após um voo internacional. O usuário olha para o seu bilhete — o voo chega em Kolkata às 13:45. Eles gostariam de pegar o carro 45 minutos depois, às 14:30. Esses fatos são verdadeiros não importa de onde no mundo o usuário esteja reservando a viagem. Neste caso, devemos definir o fuso horário para Asia/Kolkata. O deslocamento em Kolkata é de +5:30 — então selecionar 14:30 em Kolkata é equivalente a 09:00 UTC:
A maioria dos navegadores vem com um banco de dados IANA abrangente embutido no Intl.DateTimeFormat. Isso é excelente, pois o FormKit não precisa enviar o (bastante extenso) banco de dados de fusos horários para o navegador do cliente. No entanto, alguns navegadores mais antigos podem não ter o banco de dados IANA. Esses dados podem ser preenchidos facilmente usando polyfill.io com Intl.DateTimeFormat.~timeZone.all.
Muitas vezes é necessário desabilitar datas específicas no seletor de datas. Existem três maneiras de desabilitar datas no seletor de datas:
min-date - uma propriedade para controlar qual é a primeira data disponível.max-date - uma propriedade para controlar qual é a última data disponível.disabled-dates - uma propriedade para controlar se alguma data arbitrária deve ser desabilitada.Qualquer data que esteja desabilitada não pode ser selecionada no pop-up do seletor de datas, no entanto, uma data indisponível ainda pode ser definida como o valor inicial ou digitada na entrada (quando não está no modo picker-only). Para lidar com esses casos extremos, o seletor de datas possui uma regra de validação integrada (que não pode ser desabilitada) que garante que apenas datas válidas possam ser submetidas. A chave da regra de validação é invalidDate.
Muitas vezes é necessário desabilitar datas anteriores a uma data específica. Por exemplo, a reserva de um quarto de hotel só deve acontecer para datas futuras. Para fazer isso, use a propriedade min-date com uma string compatível com ISO8601 ou um objeto Date nativo:
Para desabilitar todas as datas após uma data determinada, use a propriedade max-date. Por exemplo, um seletor de aniversário deve permitir apenas datas passadas. Para fazer isso, use a propriedade max-date com uma string compatível com ISO8601 ou um objeto Date nativo:
Você pode usar min-date e max-date ao mesmo tempo. Isso não apenas limitará o intervalo de datas, mas também limitará os anos disponíveis para apenas anos válidos ao usar a entrada de texto.
Muitas vezes nossas aplicações exigem uma granularidade muito maior ao desabilitar datas do que min-date e max-date permitem. O datepicker permite um controle mais refinado ao utilizar a propriedade disabled-days.
A propriedade disabled-days espera uma função que recebe 2 argumentos: o nó central e um objeto Date. A responsabilidade da função é retornar um booleano indicando se a data está desabilitada (true significa desabilitada).
A propriedade disabled-days tem precedência sobre min-date e max-date — você pode optar por reimplementar a funcionalidade base acessando node.props.minDate ou node.props.maxDate.
É importante que a função fornecida seja rápida e síncrona — ela será chamada com frequência e repetidamente. Por exemplo, se você precisar buscar informações de um banco de dados, faça isso fora desta função e use esta função para acessar resultados memorizados.
Ao navegar pelo pop-up do calendário via teclado, o datepicker não permitirá que você selecione uma data desabilitada. No entanto, isso pode ser irritante, pois pode criar áreas de inacessibilidade se algumas datas disponíveis estiverem "presas" entre datas indisponíveis.
Para melhorar a experiência do usuário, o datepicker irá automaticamente escanear para frente ou para trás (dependendo da direção desejada) pela próxima data disponível para seleção. O número máximo de dias para escanear por um dia disponível é controlado pela propriedade maxScan (7 dias por padrão):
O campo de entrada do seletor de data pode ser limpo clicando no botão "limpar" que aparece quando o campo tem um valor — este botão de limpar só aparece quando a propriedade clearable é adicionada:
| Prop | Type | Padrão | Descrição |
|---|---|---|---|
| clearable | string | false | Adiciona um botão de limpar à direita do valor. Este botão só aparece quando o campo de entrada tem um valor completo. |
| date-format | string | D | O formato de token a ser usado no calendário para datas no mês. |
| disabled-days | function | lógica de data mínima/máxima | Uma função que recebe o nó central e um objeto `Date` e deve retornar se a data está desabilitada (`true` significa desabilitada). |
| format | string/object | date: 'long' | O formato para exibir ao usuário no campo de seleção. |
| max-date | Date | ISO8601 | none | A data máxima que o usuário tem permissão para selecionar. |
| max-scan | number | 7 | O número máximo de dias para avançar ou retroceder na busca de uma data disponível para saltar via navegação por teclado. |
| min-date | Date | ISO8601 | none | A data mais antiga que o usuário tem permissão para selecionar. |
| month-button-format | string | MMMM | O token de formato de data a ser usado para o botão do painel do mês no popup do calendário. |
| month-format | string | MMMM | O token de formato de data a ser usado para cada um dos 12 meses no painel do mês. |
| overlay | boolean | false | Se deve ou não exibir uma máscara de sobreposição. Leia mais sobre sobreposições na documentação de entrada de máscara (não tem efeito no modo `pickerOnly`). |
| picker-only | boolean | false | Se deve ou não permitir que a data seja inserida via entrada de texto. Quando o picker-only está habilitado, apenas o seletor pode ser usado para selecionar uma data. |
| show-months | number | 1 | O número de meses a serem renderizados no popup quando no painel do dia. |
| sequence | array | ['day'] | A sequência de painéis para guiar o usuário quando eles abrem a visualização do calendário do seletor de data. As opções são `year`, `month`, `day`, `time`. |
| value-format | string/object | ISO8601 | O formato para registrar como o valor da entrada. Isso pode ser composto com qualquer formato de token, estilo de data ou `ISO8601`. |
| value-locale | string | `node.props.locale` | O local a ser usado para o `valueFormat`. Ao usar tokens de formato na propriedade `valueFormat`, é altamente recomendável definir um `valueFormat` explícito. |
| week-start | number | 0 | O dia da semana para começar o calendário do painel `day`. 0-6 onde 0 = Domingo e 6 = Sábado. |
| weekday-format | string | d | O token de formato de data usado para renderizar os cabeçalhos das colunas dos dias da semana. |
| year-format | string | YYYY | O token de formato de data usado para renderizar os anos no painel `year`. |
| popover | boolean | false | Renderiza o painel de UI da entrada usando a API Popover do navegador. |
| Mostrar Universal props | |||
| config | Object | {} | Opções de configuração a serem fornecidas para o nó do input e qualquer nó descendente deste input. |
| delay | Number | 20 | Número de milissegundos para debounce do valor do input antes de despachar o commit hook. |
| dirtyBehavior | string | touched | Determina como o indicador "dirty" deste input é definido. Pode ser configurado como touched ou compare - touched (o padrão) é mais performático, mas não detectará quando o formulário corresponder novamente ao seu estado inicial. |
| errors | Array | [] | Array de strings para exibir como mensagens de erro neste campo. |
| help | String | '' | Texto para o texto de ajuda associado ao input. |
| id | String | input_{n} | O ID único do input. Fornecer um ID também permite acesso global ao nó do input. |
| ignore | Boolean | false | Impede que um input seja incluído em qualquer pai (grupo, lista, formulário etc). Útil ao usar inputs para a interface do usuário em vez de valores reais. |
| index | Number | undefined | Permite que um input seja inserido no índice fornecido, se o pai for uma lista. Se o valor do input for indefinido, ele herda o valor dessa posição de índice. Se ele tiver um valor, ele o insere nos valores da lista no índice fornecido. |
| label | String | '' | Texto para o elemento label associado ao input. |
| name | String | input_{n} | O nome do input como identificado no objeto de dados. Isso deve ser único dentro de um grupo de campos. |
| parent | FormKitNode | contextual | Por padrão, o pai é um grupo, lista ou formulário de envolvimento, mas essa prop permite a atribuição explícita do nó pai. |
| prefix-icon | String | '' | Especifica um ícone para colocar na seção prefixIcon. |
| preserve | boolean | false | Preserva o valor do input em um grupo pai, lista ou formulário quando o input é desmontado. |
| preserve-errors | boolean | false | Por padrão, os erros definidos em inputs usando setErrors são automaticamente limpos no input. Definir essa prop como true mantém o erro até que ele seja explicitamente limpo. |
| sections-schema | Object | {} | Um objeto de chaves de seção e valores parciais de esquema, em que cada esquema parcial é aplicado à seção respectiva. |
| suffix-icon | String | '' | Especifica um ícone para colocar na seção suffixIcon. |
| type | String | text | O tipo de input a ser renderizado pela biblioteca. |
| validation | String, Array | [] | As regras de validação a serem aplicadas ao input. |
| validation-visibility | String | blur | Determina quando mostrar as regras de validação com falha de um input. Os valores válidos são blur, dirty e live. |
| validation-label | String | {label prop} | Determina qual rótulo usar nas mensagens de erro de validação, por padrão, usa a propriedade label, se disponível, caso contrário, usa a propriedade name. |
| validation-rules | Object | {} | Regras de validação personalizadas adicionais para disponibilizar na propriedade de validação. |
| value | Any | undefined | Inicializa o valor do input e/ou de seus filhos. Não é reativo. Pode inicializar grupos inteiros (formulários) e listas.. |
Você pode direcionar uma seção específica de uma entrada usando a "chave" dessa seção, permitindo modificar as classes dessa seção, HTML (via :sections-schema) ou conteúdo (via slots). Leia mais sobre seções aqui.
Esta seção está localizada dentro da seção inner quando a propriedade overlay é adicionada.
O painel aparece abaixo do elemento de entrada dentro da seção inner quando o popup do seletor de datas está aberto.
O painel aparece abaixo do elemento de entrada na seção inner quando o popup do datepicker está aberto.
O painel aparece abaixo do elemento de entrada na seção inner quando o popup do datepicker está aberto.
O painel aparece abaixo do elemento de entrada dentro da seção inner quando o popup do seletor de data está aberto.
| Section-key | Descrição |
|---|---|
| calendar | O invólucro imediatamente ao redor do calendário no painel do dia. |
| calendarHeader | O invólucro ao redor das colunas do cabeçalho no painel do dia. |
| calendarWeeks | O invólucro imediatamente ao redor de cada linha de semanas no painel do dia. |
| day | O conteúdo do dia — por padrão contém o dia numérico. Neste slot/seção você pode usar context.day ($day no esquema) para obter o objeto de data para o dia dado. |
| dayButton | O botão exibido no cabeçalho do painel de tempo que navega para o painel do dia. |
| dayCell | O invólucro imediatamente ao redor da seção de data. Neste slot/seção você pode usar context.day ($day no esquema) para obter o objeto de data para o dia dado. |
| daysHeader | O invólucro ao redor das colunas do cabeçalho no painel de data. |
| month | A seção que renderiza os nomes dos meses reais no painel do mês. Neste slot/seção você pode usar context.month ($month no esquema) para obter o objeto de data para o mês dado. |
| monthButton | O botão no cabeçalho dos painéis do dia e do tempo que navega para o painel do mês. |
| months | O invólucro imediatamente ao redor das seções de meses no painel do mês. |
| monthsHeader | O invólucro imediatamente ao redor dos botões do cabeçalho (yearButton) no painel do mês. |
| next | No cabeçalho do painel, o botão responsável por navegar para o próximo mês ou década. |
| nextLabel | A seção responsável por renderizar o conteúdo de texto do botão seguinte no cabeçalho do painel. |
| panelClose | A seção responsável por renderizar o botão de fechar do seletor de data, mostrado em dispositivos de toque pequenos. |
| closeIcon | O ícone renderizado dentro da seção panelClose. |
| openButton | O botão responsável por abrir o diálogo do seletor. |
| overlay | O invólucro externo do overlay. O overlay é usado para imitar o texto que está na entrada de texto durante o modo de entrada de texto para permitir a estilização. |
| overlayChar | Uma seção contendo caracteres de overlay do tipo char |
| overlayEnum | Uma seção contendo caracteres de overlay do tipo enum |
| overlayInner | Um invólucro interno imediatamente dentro da seção de overlay. |
| overlayLiteral | Uma seção contendo caracteres de overlay do tipo literal |
| overlayParts | Uma seção contendo todas as partes do overlay como filhos imediatos. |
| overlayPlaceholder | Uma seção contendo caracteres de overlay do tipo placeholder. |
| panel | Um invólucro ao redor do painel ativo atualmente. Isso é renderizado abaixo do panelHeader como um irmão. |
| panelHeader | Um invólucro ao redor do cabeçalho de cada painel onde os botões de navegação do painel estão localizados. Este é um irmão da seção do painel. |
| panelWrapper | Um invólucro ao redor das seções do painel e panelHeader, esta seção é responsável por mostrar ou esconder o diálogo do seletor. |
| prev | No cabeçalho do painel, o botão responsável por navegar para o mês ou década anterior. |
| prevLabel | A seção responsável por renderizar o conteúdo de texto do botão anterior no cabeçalho do painel. |
| time | O painel de tempo que contém o timeInput. |
| timeHeader | O cabeçalho do painel de tempo com botões de navegação para os painéis do ano, mês e dia. |
| timeInput | Uma entrada HTML time nativa responsável por definir o tempo da data selecionada. |
| week | Um invólucro ao redor de uma linha de 7 dias no painel do dia. |
| weekDay | A célula responsável por renderizar o dia da semana no cabeçalho do calendário do painel do dia (S, T, Q etc...). |
| weekDays | O elemento de invólucro ao redor dos dias da semana no cabeçalho do calendário no painel do dia. |
| year | O elemento responsável por renderizar cada um dos anos disponíveis no painel do ano. |
| yearButton | O botão no cabeçalho dos painéis do mês, dia e tempo que navega para o painel do ano. |
| years | O painel dos anos, responsável por renderizar uma década de anos de cada vez. |
| yearsHeader | O cabeçalho do painel quando no painel dos anos, mostra o intervalo do ano da década atual. |
| Mostrar Universal section keys | |
| outer | O elemento de envolvimento mais externo. |
| wrapper | Um invólucro ao redor do rótulo e do input. |
| label | O rótulo do input. |
| prefix | Por padrão, não gera saída, mas permite conteúdo diretamente antes de um elemento input. |
| prefixIcon | Um elemento para gerar um ícone antes da seção de prefixo. |
| inner | Um invólucro ao redor do próprio elemento input. |
| suffix | Por padrão, não gera saída, mas permite conteúdo diretamente após um elemento input. |
| suffixIcon | Um elemento para gerar um ícone após a seção de sufixo. |
| input | O próprio elemento input. |
| help | O elemento que contém o texto de ajuda. |
| messages | Um invólucro ao redor de todas as mensagens. |
| message | O elemento (ou muitos elementos) que contém uma mensagem - na maioria das vezes mensagens de validação e erros. |
Todos os campos de entrada do FormKit são projetados tendo em mente as seguintes considerações de acessibilidade. Ajude-nos a melhorar continuamente a acessibilidade para todos, relatando problemas de acessibilidade aqui:
| Chave de Seção | Atributo | Padrão | Descrição |
|---|---|---|---|
| panelWrapper | tabindex | -1 ou 0 | Prioriza a ordem de foco do teclado definindo-a para -1 quando desativado e 0 quando ativado. |
| aria-modal | true | Indica que o diálogo modal está presente e bloqueia a interação com outros elementos na página. | |
| aria-label | Fornece um nome acessível. | ||
| weekDay | aria-label | Fornece um nome acessível. | |
| dayCell | tabindex | -1 ou 0 | Prioriza a ordem de foco do teclado definindo-a para 0 quando é o mesmo dia e -1 quando não é. |
| aria-selected | Indica se o dia está atualmente selecionado. | ||
| aria-label | Fornece um nome acessível. | ||
| openButton | tabindex | -1 ou 0 | Prioriza a ordem de foco do teclado definindo-a para -1 quando está apenas no modo de seleção e 0 quando não está. |
| aria-label | Fornece um nome acessível. | ||
| aria-haspopup | true | Sinaliza a presença de um menu pop-up ou diálogo acionado por esta interação. | |
| aria-expanded | Indica se o elemento colorpicker está atualmente expandido ou recolhido. | ||
| aria-controls | Vincula este elemento ao ID do elemento listbox. | ||
| year | tabindex | -1 ou 0 | Prioriza a ordem de foco do teclado definindo-a para 0 quando é o mesmo ano e -1 quando não é. |
| aria-selected | Indica se o ano está atualmente selecionado. | ||
| month | tabindex | -1 ou 0 | Prioriza a ordem de foco do teclado definindo-a para 0 quando é o mesmo mês e -1 quando não é. |
| aria-selected | Indica se o mês está atualmente selecionado. | ||
| panelHeader | aria-live | polite | Anuncia para leitores de tela que este elemento foi atualizado dinamicamente sem interromper a tarefa atual. |
| dayButton | tabindex | 2 | Prioriza a ordem de foco do teclado definindo-a para 2. |
| removeSelection | aria-controls | Vincula este elemento ao ID do elemento de entrada. | |
| panelClose | tabindex | -1 | Prioriza a ordem de foco do teclado definindo-a para -1. |
| aria-label | Fornece um nome acessível. | ||
| Mostrar Universal chave de seção | |||
| label | label | for | Associa isso a um elemento de entrada, aprimorando acessibilidade e experiência do usuário |
| input | input | disabled | Desabilita um elemento HTML, impedindo a interação do usuário e sinalizando um estado não interativo |
| aria-describedby | Aprimora a acessibilidade associando um elemento a uma descrição, auxiliando leitores de tela | ||
| aria-required | Adiciona o estado necessário quando a validação é exigida. | ||
| icon | icon | for | Sempre que um ícone é definido como rótulo, ele o vincula a um elemento de entrada, aprimorando acessibilidade e experiência do usuário |
| Evento de Teclado | Descrição |
|---|---|
| Tab | Move o foco para a próxima entrada focalizável na página. |
| Shift + Tab | Move o foco para a entrada focalizável anterior na página. |