SDateField <s-date-field>

Um campo para inserir uma data. SDateField é o wrapper de Vue 3 tipado do web component <s-date-field> do Shopify Polaris.

import { SDateField } from 'polaris-vue-elements'

Boas práticas

• Comece com uma data sensata. Preencha value com a data existente ao editar, ou com uma opção provável ao sugerir uma.
• Limite as datas ao que faz sentido. Restrinja as datas que os lojistas podem escolher com allow e disallow, como limitar um campo de agendamento a datas futuras ou um campo comercial a dias de segunda a sexta.
• Explique os limites em details. Deixe claros requisitos como "Deve ser uma data futura" para que os lojistas conheçam as regras antes de escolher.
• Torne as mensagens de error acionáveis. Quando uma data for inválida, diga aos lojistas como corrigi-la.

Veja as boas práticas da Shopify para <s-date-field> (em inglês) para todas as recomendações.

Exemplo

Value: (empty)

<script setup>
import { ref } from 'vue'
import { SDateField } from 'polaris-vue-elements'

const value = ref('')
</script>

<template>
  <SDateField label="Delivery date" placeholder="YYYY-MM-DD" v-model="value" />
  <p>Value: {{ value }}</p>
</template>

v-model

v-model em <SDateField> se vincula à propriedade value e escuta o event DOM input.

<SDateField v-model="value" />

equivale a:

<SDateField :value="value" @input="value = $event.target.value" />

Props

Prop	Tipo	Descrição
allow	string	Datas que podem ser selecionadas. Uma lista separada por vírgulas de datas e intervalos de datas. Espaços em branco são permitidos após as vírgulas. O padrão '' permite todas as datas. - Datas no formato YYYY-MM-DD permitem uma única data. - Datas no formato YYYY-MM permitem um mês inteiro. - Datas no formato YYYY permitem um ano inteiro. - Intervalos são expressos como start--end. - Os intervalos são inclusivos. - Se start ou end for omitido, o intervalo fica ilimitado nessa direção. - Se partes da data forem omitidas em start, elas assumem o menor valor possível. Assim, 2024-- equivale a 2024-01-01--. - Se partes da data forem omitidas em end, elas assumem o maior valor possível. Assim, --2024 equivale a --2024-12-31. - Espaços em branco são permitidos em ambos os lados de --.
allowDays	string	Dias da semana que podem ser selecionados. Eles fazem interseção com o resultado de allow e disallow. Uma lista de dias separada por vírgulas. Espaços em branco são permitidos após as vírgulas. O padrão '' não tem efeito sobre o resultado de allow e disallow. Os dias são sunday, monday, tuesday, wednesday, thursday, friday, saturday.
autocomplete	"bday-day" | "bday-month" | "bday-year" | "bday" | "cc-expiry-month" | "cc-expiry-year" | "cc-expiry"	Uma indicação sobre o conteúdo esperado do campo. Quando definida como on (o padrão), esta propriedade indica que o campo deve oferecer suporte ao preenchimento automático, mas você não tem mais informações semânticas sobre o conteúdo esperado. Quando definida como off, você indica que este campo contém informações confidenciais ou conteúdo que nunca é salvo, como códigos de uso único. Como alternativa, você pode fornecer um valor que descreva os dados específicos que deseja que sejam inseridos neste campo durante o preenchimento automático.
defaultValue	string	O valor de data inicial quando o campo é renderizado pela primeira vez, no formato YYYY-MM-DD. Uma string vazia significa que nenhuma data está selecionada inicialmente.
defaultView	string	Mês padrão a ser exibido, no formato YYYY-MM. Esse valor é usado até que view seja definido, diretamente ou como resultado da interação do usuário. O padrão é o mês atual na localidade do usuário.
details	any	Texto adicional que oferece contexto ou orientação sobre o campo. Esse texto é exibido junto com o campo e seu rótulo para oferecer mais informações ou instruções ao usuário. Ele também é exposto aos usuários de leitores de tela.
disabled	boolean	Desativa o campo, impedindo qualquer interação.
disallow	string	Datas que não podem ser selecionadas. Elas são subtraídas de allow. Uma lista separada por vírgulas de datas e intervalos de datas. Espaços em branco são permitidos após as vírgulas. O padrão '' não tem efeito sobre allow. - Datas no formato YYYY-MM-DD bloqueiam uma única data. - Datas no formato YYYY-MM bloqueiam um mês inteiro. - Datas no formato YYYY bloqueiam um ano inteiro. - Intervalos são expressos como start--end. - Os intervalos são inclusivos. - Se start ou end for omitido, o intervalo fica ilimitado nessa direção. - Se partes da data forem omitidas em start, elas assumem o menor valor possível. Assim, 2024-- equivale a 2024-01-01--. - Se partes da data forem omitidas em end, elas assumem o maior valor possível. Assim, --2024 equivale a --2024-12-31. - Espaços em branco são permitidos em ambos os lados de --.
disallowDays	string	Dias da semana que não podem ser selecionados. Eles são subtraídos de allowDays e fazem interseção com o resultado de allow e disallow. Uma lista de dias separada por vírgulas. Espaços em branco são permitidos após as vírgulas. O padrão '' não tem efeito sobre allowDays. Os dias são sunday, monday, tuesday, wednesday, thursday, friday, saturday.
error	any	Indica um erro ao usuário. O campo recebe um tratamento visual específico para comunicar problemas que precisam ser resolvidos imediatamente.
id	string	Um identificador exclusivo para o elemento.
label	any	Conteúdo usado como rótulo do campo.
labelAccessibilityVisibility	"visible" | "exclusive"	Altera a visibilidade do rótulo do componente. - visible: o rótulo fica visível para todos os usuários. - exclusive: o rótulo fica visualmente oculto, mas permanece na árvore de acessibilidade.
name	string	Um identificador do campo que é exclusivo dentro do formulário contêiner mais próximo.
placeholder	string	Uma breve indicação que descreve o valor esperado do campo.
readOnly	boolean	O campo não pode ser editado pelo usuário. Ele pode receber foco e é anunciado pelos leitores de tela.
required	boolean	Se o campo exige um valor. Este requisito adiciona valor semântico ao campo, mas não faz um erro aparecer automaticamente. Se quiser exibir um erro quando este campo estiver vazio, você pode fazer isso com a propriedade error.
value	string	A data selecionada no momento, no formato YYYY-MM-DD. Uma string vazia significa que nenhuma data está selecionada.
view	string	Mês exibido, no formato YYYY-MM. onViewChange é chamado quando esse valor muda. O padrão é defaultView.

Events

Event	Tipo
blur	Event
change	Event
focus	Event
input	Event
invalid	CustomEvent
viewchange	CustomEvent

Escute-os com listeners no estilo @blur em <SDateField>.

Slots

Slot	Descrição
details
error