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 で説明する。 「Must be a future date」のような要件を明記し、マーチャントが選ぶ前にルールを把握できるようにします。
• error メッセージは対処方法がわかるようにする。 日付が無効なときは、どう直せばよいかをマーチャントに伝えます。

詳しいガイダンスについては、<s-date-field> に関する Shopify のベストプラクティス（英語）を参照してください。

例

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 プロパティにバインドされ、input DOM イベントを監視します。

<SDateField v-model="value" />

これは次と同等です：

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

Props

Prop	型	説明
allow	string	選択可能な日付です。日付または日付範囲をカンマ区切りで並べたリストです。カンマの後には空白を入れられます。デフォルトの '' はすべての日付を許可します。 - YYYY-MM-DD 形式の日付は単一の日付を許可します。 - YYYY-MM 形式の日付は 1 か月全体を許可します。 - YYYY 形式の日付は 1 年全体を許可します。 - 範囲は 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 形式の日付は 1 か月全体を不許可にします。 - YYYY 形式の日付は 1 年全体を不許可にします。 - 範囲は 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