SDateField <s-date-field>

Un campo para introducir una fecha. SDateField es el wrapper de Vue 3 tipado del web component <s-date-field> de Shopify Polaris.

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

Buenas prácticas

• Empieza con una fecha razonable. Rellena value de antemano con la fecha existente al editar, o con una opción probable cuando sugieras una.
• Limita las fechas a las que tengan sentido. Acota las fechas que los comerciantes pueden elegir con allow y disallow, por ejemplo restringiendo un campo de programación a fechas futuras o un campo laboral a los días de lunes a viernes.
• Explica los límites en details. Detalla los requisitos, como "Must be a future date", para que los comerciantes conozcan las reglas antes de elegir.
• Haz que los mensajes de error sean útiles. Cuando una fecha no sea válida, indica a los comerciantes cómo corregirla.

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

Ejemplo

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

<SDateField v-model="value" />

equivale a:

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

Props

Prop	Tipo	Descripción
allow	string	Fechas que se pueden seleccionar. Una lista separada por comas de fechas y rangos de fechas. Se permiten espacios en blanco después de las comas. El valor predeterminado '' permite todas las fechas. - Las fechas en formato YYYY-MM-DD permiten una sola fecha. - Las fechas en formato YYYY-MM permiten un mes completo. - Las fechas en formato YYYY permiten un año completo. - Los rangos se expresan como start--end. - Los rangos son inclusivos. - Si se omite start o end, el rango no tiene límite en esa dirección. - Si se omiten partes de la fecha en start, se toma el valor mínimo posible. Así, 2024-- equivale a 2024-01-01--. - Si se omiten partes de la fecha en end, se toma el valor máximo posible. Así, --2024 equivale a --2024-12-31. - Se permiten espacios en blanco a ambos lados de --.
allowDays	string	Días de la semana que se pueden seleccionar. Se intersecan con el resultado de allow y disallow. Una lista de días separada por comas. Se permiten espacios en blanco después de las comas. El valor predeterminado '' no tiene efecto sobre el resultado de allow y disallow. Los días son sunday, monday, tuesday, wednesday, thursday, friday, saturday.
autocomplete	"bday-day" | "bday-month" | "bday-year" | "bday" | "cc-expiry-month" | "cc-expiry-year" | "cc-expiry"	Una indicación sobre el contenido previsto del campo. Cuando se establece en on (el valor predeterminado), esta propiedad indica que el campo debe admitir el autocompletado, pero no tienes más información semántica sobre el contenido previsto. Cuando se establece en off, indicas que este campo contiene información confidencial o contenido que nunca se guarda, como los códigos de un solo uso. Como alternativa, puedes proporcionar un valor que describa los datos concretos que quieres que se introduzcan en este campo durante el autocompletado.
defaultValue	string	El valor de fecha inicial cuando el campo se muestra por primera vez, en formato YYYY-MM-DD. Una cadena vacía significa que inicialmente no hay ninguna fecha seleccionada.
defaultView	string	Mes predeterminado que se muestra, en formato YYYY-MM. Este valor se usa hasta que se establece view, ya sea directamente o como resultado de la interacción del usuario. De forma predeterminada, es el mes actual según la configuración regional del usuario.
details	any	Texto adicional que aporta contexto u orientación sobre el campo. Este texto se muestra junto con el campo y su etiqueta para ofrecer más información o instrucciones al usuario. También se expone a los usuarios de lectores de pantalla.
disabled	boolean	Desactiva el campo e impide cualquier interacción.
disallow	string	Fechas que no se pueden seleccionar. Se restan de allow. Una lista separada por comas de fechas y rangos de fechas. Se permiten espacios en blanco después de las comas. El valor predeterminado '' no tiene efecto sobre allow. - Las fechas en formato YYYY-MM-DD excluyen una sola fecha. - Las fechas en formato YYYY-MM excluyen un mes completo. - Las fechas en formato YYYY excluyen un año completo. - Los rangos se expresan como start--end. - Los rangos son inclusivos. - Si se omite start o end, el rango no tiene límite en esa dirección. - Si se omiten partes de la fecha en start, se toma el valor mínimo posible. Así, 2024-- equivale a 2024-01-01--. - Si se omiten partes de la fecha en end, se toma el valor máximo posible. Así, --2024 equivale a --2024-12-31. - Se permiten espacios en blanco a ambos lados de --.
disallowDays	string	Días de la semana que no se pueden seleccionar. Se restan de allowDays y se intersecan con el resultado de allow y disallow. Una lista de días separada por comas. Se permiten espacios en blanco después de las comas. El valor predeterminado '' no tiene efecto sobre allowDays. Los días son sunday, monday, tuesday, wednesday, thursday, friday, saturday.
error	any	Indica un error al usuario. El campo recibe un tratamiento estilístico específico para comunicar problemas que deben resolverse de inmediato.
id	string	Un identificador único para el elemento.
label	any	Contenido que se usa como etiqueta del campo.
labelAccessibilityVisibility	"visible" | "exclusive"	Cambia la visibilidad de la etiqueta del componente. - visible: la etiqueta es visible para todos los usuarios. - exclusive: la etiqueta se oculta visualmente, pero permanece en el árbol de accesibilidad.
name	string	Un identificador del campo que es único dentro del formulario contenedor más cercano.
placeholder	string	Una breve indicación que describe el valor esperado del campo.
readOnly	boolean	El usuario no puede editar el campo. Puede recibir el foco y los lectores de pantalla lo anuncian.
required	boolean	Si el campo requiere un valor. Este requisito añade valor semántico al campo, pero no hará que aparezca un error automáticamente. Si quieres mostrar un error cuando este campo esté vacío, puedes hacerlo con la propiedad error.
value	string	La fecha seleccionada actualmente, en formato YYYY-MM-DD. Una cadena vacía significa que no hay ninguna fecha seleccionada.
view	string	Mes mostrado, en formato YYYY-MM. Se llama a onViewChange cuando cambia este valor. De forma predeterminada, es defaultView.

Events

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

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

Slots

Slot	Descripción
details
error