SDatePicker <s-date-picker>

Un calendario para seleccionar una sola fecha o un rango de fechas. SDatePicker es el wrapper de Vue 3 tipado del web component <s-date-picker> de Shopify Polaris.

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

Buenas prácticas

• Empieza con una fecha razonable. Rellena value de antemano para que los comerciantes hagan su selección más rápido.
• Ofrece atajos para las opciones habituales. Valores predefinidos como "Today", "Last 7 days" o "This month" evitan que los comerciantes tengan que recorrer el calendario.
• Usa type="range" para fechas de inicio y fin. La selección de rangos es adecuada para informes, analíticas y otros filtros basados en un periodo de tiempo.
• Bloquea las fechas que no correspondan. Usa allow y disallow para que los comerciantes no puedan elegir fechas no válidas para tu caso de uso.
• Deja espacio alrededor del selector. Dale suficiente espacio para que no estorbe a los teclados en pantalla ni a otros elementos interactivos.
• Ten en cuenta las fechas lejanas. Avanzar mes a mes se vuelve tedioso más allá de unos pocos años, así que para fechas fuera de un margen de aproximadamente 5 a 10 años, ofrece valores predefinidos o deja que los comerciantes escriban el año directamente.

<SDatePicker type="range" />

Consulta las buenas prácticas de Shopify para <s-date-picker> (en inglés) para ver todas las recomendaciones.

Ejemplo

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 en <SDatePicker> se vincula a la propiedad value y escucha el event DOM input.

<SDatePicker v-model="value" />

equivale a:

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

Props

Prop	Tipo	Descripción
allow	string	Especifica qué fechas se pueden seleccionar, como una lista separada por comas. Una cadena vacía (valor predeterminado) permite todas las fechas. Formatos:* - YYYY-MM-DD: una sola fecha - YYYY-MM: un mes completo - YYYY: un año completo - start--end: rango de fechas (inclusivo, sin límite si se omite start/end) Ejemplos:* - 2024-02--2025: desde febrero de 2024 hasta el final de 2025 - 2024-05-09, 2024-05-11: solo el 9 y el 11 de mayo de 2024
allowDays	string	Especifica qué días de la semana se pueden seleccionar, como una lista separada por comas. Restringe aún más las fechas de allow y disallow. Una cadena vacía (valor predeterminado) no tiene efecto. Días válidos*: sunday, monday, tuesday, wednesday, thursday, friday, saturday Ejemplo:* saturday, sunday (solo fines de semana)
defaultValue	string	La(s) fecha(s) seleccionada(s) inicialmente cuando el componente se muestra por primera vez. Una cadena vacía significa que inicialmente no hay ninguna fecha seleccionada. - Una sola fecha en formato YYYY-MM-DD cuando type está establecido en "single" - Un rango de fechas en formato YYYY-MM-DD--YYYY-MM-DD (inclusivo) cuando type está establecido en "range"
defaultView	string	El mes predeterminado que se muestra, en formato YYYY-MM. Se usa hasta que la callback view se establece por interacción del usuario o mediante programación. El valor predeterminado es el mes actual en la configuración regional del usuario.
disallow	string	Especifica qué fechas no se pueden seleccionar, como una lista separada por comas. Estas fechas se excluyen de las especificadas en allow. Una cadena vacía (valor predeterminado) no tiene efecto. Formatos:* - YYYY-MM-DD: una sola fecha - YYYY-MM: un mes completo - YYYY: un año completo - start--end: rango de fechas (inclusivo, sin límite si se omite start/end) Ejemplos:* - --2024-02: todas las fechas anteriores a febrero de 2024 - 2024-05-09, 2024-05-11: el 9 y el 11 de mayo de 2024
disallowDays	string	Especifica qué días de la semana no se pueden seleccionar, como una lista separada por comas. Excluye días de allowDays y se combina (intersección) con allow y disallow. Una cadena vacía (valor predeterminado) no tiene efecto. Días válidos*: sunday, monday, tuesday, wednesday, thursday, friday, saturday Ejemplo:* saturday, sunday (sin fines de semana)
name	string	Un identificador del campo que es único dentro del formulario contenedor más cercano.
type	"single" | "range"	El tipo de selección de fecha permitido. - single: selecciona una sola fecha - range: selecciona un rango de fechas
value	string	La(s) fecha(s) seleccionada(s) actualmente. Una cadena vacía significa que no hay ninguna fecha seleccionada. - Una sola fecha en formato YYYY-MM-DD cuando type está establecido en "single" - Un rango de fechas en formato YYYY-MM-DD--YYYY-MM-DD (inclusivo) cuando type está establecido en "range"
view	string	El mes que se muestra actualmente, en formato YYYY-MM. Cuando cambia, se activa la callback viewchange. El valor predeterminado es defaultView.
visibleMonths	"auto" | "1" | "2"	Controla cuántos meses se muestran. - 'auto': según el contexto. Actualmente muestra un solo mes, igual que '1'. - '1': muestra un mes cada vez. - '2': muestra dos meses consecutivos uno al lado del otro.

Events

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

Escúchalos con listeners del estilo @blur en <SDatePicker>.