SDatePicker <s-date-picker>

Um calendário para selecionar uma única data ou um intervalo de datas. SDatePicker é o wrapper de Vue 3 tipado do web component <s-date-picker> do Shopify Polaris.

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

Boas práticas

• Comece com uma data sensata. Preencha value para que os lojistas façam a seleção mais rápido.
• Ofereça atalhos para escolhas comuns. Predefinições como "Hoje", "Últimos 7 dias" ou "Este mês" poupam os lojistas de navegar pelo calendário.
• Use type="range" para datas de início e fim. A seleção de intervalo é ideal para relatórios, análises e outros filtros baseados em um período.
• Bloqueie as datas que não se aplicam. Use allow e disallow para que os lojistas não possam escolher datas inválidas para o seu caso de uso.
• Deixe espaço ao redor do seletor. Dê a ele espaço suficiente para que não atrapalhe teclados na tela ou outros elementos interativos.
• Pense em datas distantes. Avançar mês a mês fica cansativo depois de alguns anos, então, para datas fora de uma janela de aproximadamente 5–10 anos, ofereça predefinições ou deixe os lojistas digitarem o ano diretamente.

<SDatePicker type="range" />

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

Exemplo

Selected: (none)

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

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

<template>
  <SDatePicker type="single" v-model="value" />
  <p>Selected: {{ value }}</p>
</template>

v-model

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

<SDatePicker v-model="value" />

equivale a:

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

Props

Prop	Tipo	Descrição
allow	string	Especifica quais datas podem ser selecionadas, como uma lista separada por vírgulas. Uma string vazia (padrão) permite todas as datas. Formatos:* - YYYY-MM-DD: uma única data - YYYY-MM: um mês inteiro - YYYY: um ano inteiro - start--end: intervalo de datas (inclusivo, ilimitado se start/end for omitido) Exemplos:* - 2024-02--2025: de fevereiro de 2024 até o fim de 2025 - 2024-05-09, 2024-05-11: apenas 9 e 11 de maio de 2024
allowDays	string	Especifica quais dias da semana podem ser selecionados, como uma lista separada por vírgulas. Restringe ainda mais as datas de allow e disallow. Uma string vazia (padrão) não tem efeito. Dias válidos*: sunday, monday, tuesday, wednesday, thursday, friday, saturday Exemplo:* saturday, sunday (apenas fins de semana)
defaultValue	string	A(s) data(s) selecionada(s) inicialmente quando o componente é renderizado pela primeira vez. Uma string vazia significa que nenhuma data está selecionada inicialmente. - Uma única data no formato YYYY-MM-DD quando type está definido como "single" - Um intervalo de datas no formato YYYY-MM-DD--YYYY-MM-DD (inclusivo) quando type está definido como "range"
defaultView	string	O mês padrão a ser exibido, no formato YYYY-MM. É usado até que o callback view seja definido por interação do usuário ou programaticamente. O padrão é o mês atual na localidade do usuário.
disallow	string	Especifica quais datas não podem ser selecionadas, como uma lista separada por vírgulas. Essas datas são excluídas das especificadas em allow. Uma string vazia (padrão) não tem efeito. Formatos:* - YYYY-MM-DD: uma única data - YYYY-MM: um mês inteiro - YYYY: um ano inteiro - start--end: intervalo de datas (inclusivo, ilimitado se start/end for omitido) Exemplos:* - --2024-02: todas as datas anteriores a fevereiro de 2024 - 2024-05-09, 2024-05-11: 9 e 11 de maio de 2024
disallowDays	string	Especifica quais dias da semana não podem ser selecionados, como uma lista separada por vírgulas. Exclui dias de allowDays e faz interseção com allow e disallow. Uma string vazia (padrão) não tem efeito. Dias válidos*: sunday, monday, tuesday, wednesday, thursday, friday, saturday Exemplo:* saturday, sunday (sem fins de semana)
name	string	Um identificador do campo que é exclusivo dentro do formulário contêiner mais próximo.
type	"single" | "range"	O tipo de seleção de data permitido. - single: seleciona uma única data - range: seleciona um intervalo de datas
value	string	A(s) data(s) selecionada(s) no momento. Uma string vazia significa que nenhuma data está selecionada. - Uma única data no formato YYYY-MM-DD quando type está definido como "single" - Um intervalo de datas no formato YYYY-MM-DD--YYYY-MM-DD (inclusivo) quando type está definido como "range"
view	string	O mês exibido no momento, no formato YYYY-MM. Quando alterado, o callback viewchange é acionado. O padrão é defaultView.
visibleMonths	"auto" | "1" | "2"	Controla quantos meses são exibidos. - 'auto': definido pelo contexto. Atualmente exibe um único mês, igual a '1'. - '1': exibe um mês por vez. - '2': exibe dois meses consecutivos lado a lado.

Events

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

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