SDateField <s-date-field>

用于输入日期的输入框。 SDateField 是 Shopify Polaris <s-date-field> web component 的带类型 Vue 3 wrapper。

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

最佳实践

• 从合理的日期开始。 编辑时用现有日期预填 value，给出建议时则用最可能的选项预填。
• 将日期限制在合理范围内。 使用 allow 和 disallow 缩小商家可选的日期范围，例如将排期字段限制为未来的日期，或将业务字段限制为周一至周五。
• 在 details 中说明限制条件。 写明“必须是未来的日期”之类的要求，让商家在选择之前就了解规则。
• 让 error 消息具有可操作性。 当日期无效时，告诉商家如何修正。

参阅 Shopify 关于 <s-date-field> 的最佳实践（英文）以获取完整指南。

示例

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

<SDateField> 上的 v-model 绑定到 value property，并监听 input DOM 事件。

<SDateField v-model="value" />

等价于：

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

Props

Prop	类型	说明
allow	string	可以选择的日期。以逗号分隔的日期或日期范围列表。逗号后允许有空白。默认值 '' 允许所有日期。 - YYYY-MM-DD 格式的日期允许单个日期。 - YYYY-MM 格式的日期允许整个月份。 - YYYY 格式的日期允许整年。 - 范围表示为 start--end。 - 范围包含两端。 - 如果省略 start 或 end，则该方向上的范围不受限制。 - 如果 start 省略了日期的部分内容，则假定为可能的最小值。因此 2024-- 等同于 2024-01-01--。 - 如果 end 省略了日期的部分内容，则假定为可能的最大值。因此 --2024 等同于 --2024-12-31。 - -- 两侧都允许有空白。
allowDays	string	可以选择的星期几。它们与 allow 和 disallow 的结果取交集。以逗号分隔的星期列表。逗号后允许有空白。默认值 '' 不会影响 allow 和 disallow 的结果。可用值为 sunday、monday、tuesday、wednesday、thursday、friday、saturday。
autocomplete	"bday-day" | "bday-month" | "bday-year" | "bday" | "cc-expiry-month" | "cc-expiry-year" | "cc-expiry"	关于字段预期内容的提示。设置为 on（默认值）时，表示该字段应支持自动填充，但没有关于预期内容的更多语义信息。设置为 off 时，表示该字段包含敏感信息或永远不会被保存的内容，例如一次性验证码。此外，也可以提供一个值，描述希望在自动填充时填入该字段的具体数据。
defaultValue	string	字段首次渲染时的初始日期值，格式为 YYYY-MM-DD。空字符串表示初始时未选择日期。
defaultView	string	默认显示的月份，格式为 YYYY-MM。在设置 view（直接设置或因用户交互而设置）之前使用此值。默认为用户所在区域的当前月份。
details	any	为字段提供上下文或指引的附加文本。该文本会与字段及其标签一起显示，为用户提供更多信息或说明。它也会提供给屏幕阅读器用户。
disabled	boolean	禁用字段，不允许任何交互。
disallow	string	不可选择的日期。它们会从 allow 中排除。以逗号分隔的日期或日期范围列表。逗号后允许有空白。默认值 '' 不会影响 allow。 - YYYY-MM-DD 格式的日期禁止单个日期。 - YYYY-MM 格式的日期禁止整个月份。 - YYYY 格式的日期禁止整年。 - 范围表示为 start--end。 - 范围包含两端。 - 如果省略 start 或 end，则该方向上的范围不受限制。 - 如果 start 省略了日期的部分内容，则假定为可能的最小值。因此 2024-- 等同于 2024-01-01--。 - 如果 end 省略了日期的部分内容，则假定为可能的最大值。因此 --2024 等同于 --2024-12-31。 - -- 两侧都允许有空白。
disallowDays	string	不可选择的星期几。它们会从 allowDays 中排除，并与 allow 和 disallow 的结果取交集。以逗号分隔的星期列表。逗号后允许有空白。默认值 '' 不会影响 allowDays。可用值为 sunday、monday、tuesday、wednesday、thursday、friday、saturday。
error	any	向用户提示错误。字段会采用特定的样式处理，以传达必须立即解决的问题。
id	string	元素的唯一标识符。
label	any	用作字段标签的内容。
labelAccessibilityVisibility	"visible" | "exclusive"	更改组件标签的可见性。 - visible：标签对所有用户可见。 - exclusive：标签在视觉上隐藏，但仍保留在无障碍树中。
name	string	字段的标识符，在最近的外层表单内唯一。
placeholder	string	描述字段预期值的简短提示。
readOnly	boolean	该字段不能由用户编辑。它可以获得焦点，并会被屏幕阅读器朗读。
required	boolean	字段是否需要填写值。此要求会为字段添加语义，但不会自动显示错误。如果希望在字段为空时显示错误，可以使用 error 属性。
value	string	当前选中的日期，格式为 YYYY-MM-DD。空字符串表示未选择日期。
view	string	显示的月份，格式为 YYYY-MM。此值变化时会调用 onViewChange。默认为 defaultView。

Events

Event	类型
blur	Event
change	Event
focus	Event
input	Event
invalid	CustomEvent
viewchange	CustomEvent

在 <SDateField> 上使用 @blur 形式的监听器来监听这些事件。

Slots

Slot	说明
details
error