SDatePicker `<s-date-picker>`

単一の日付または日付の範囲を選択するカレンダー。 SDatePicker は、Shopify Polaris の <s-date-picker> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

妥当な日付から始める。 value をあらかじめ入れておき、マーチャントがすばやく選択できるようにします。
よく使う選択にはショートカットを用意する。 「Today」「Last 7 days」「This month」のようなプリセットがあれば、マーチャントはカレンダーをクリックして移動する手間が省けます。
開始日と終了日には type="range" を使う。 範囲選択は、レポート、分析、その他の期間に基づくフィルターに適しています。
当てはまらない日付はブロックする。 allow と disallow を使い、ユースケース上無効な日付をマーチャントが選べないようにします。
ピッカーの周りに余白を取る。 オンスクリーンキーボードや他のインタラクティブな要素の邪魔にならないよう、十分なスペースを確保します。
遠い日付を考慮する。 数年を超えると月ごとのページ送りは面倒になるため、おおよそ 5〜10 年の範囲外の日付には、プリセットを用意するか、マーチャントが年を直接入力できるようにします。

vue

<SDatePicker type="range" />

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

例

Selected: (none)

vue

<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

<SDatePicker> の v-model は value プロパティにバインドされ、input DOM イベントを監視します。

template

<SDatePicker v-model="value" />

これは次と同等です：

template

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

Props

Prop	型	説明
`allow`	`string`	選択可能な日付をカンマ区切りのリストで指定します。空文字列（デフォルト）はすべての日付を許可します。形式:* - `YYYY-MM-DD`: 単一の日付 - `YYYY-MM`: 1 か月全体 - `YYYY`: 1 年全体 - `start--end`: 日付範囲（両端を含み、start/end を省略すると無制限）例:* - `2024-02--2025`: 2024 年 2 月から 2025 年末まで - `2024-05-09, 2024-05-11`: 2024 年 5 月 9 日と 11 日のみ
`allowDays`	`string`	選択可能な曜日をカンマ区切りのリストで指定します。`allow` と `disallow` による日付をさらに制限します。空文字列（デフォルト）は効果がありません。有効な曜日: `sunday`、`monday`、`tuesday`、`wednesday`、`thursday`、`friday`、`saturday` 例: `saturday, sunday`（週末のみ）
`defaultValue`	`string`	コンポーネントが最初にレンダリングされたときに初期選択される日付です。空文字列は、初期状態で日付が選択されていないことを意味します。 - `type` が `"single"` に設定されている場合は、`YYYY-MM-DD` 形式の単一の日付 - `type` が `"range"` に設定されている場合は、`YYYY-MM-DD--YYYY-MM-DD` 形式の日付範囲（両端を含む）
`defaultView`	`string`	表示するデフォルトの月です（`YYYY-MM` 形式）。ユーザー操作またはプログラムによって `view` コールバックが設定されるまで使用されます。デフォルトはユーザーのロケールにおける現在の月です。
`disallow`	`string`	選択できない日付をカンマ区切りのリストで指定します。これらの日付は `allow` で指定された日付から除外されます。空文字列（デフォルト）は効果がありません。形式:* - `YYYY-MM-DD`: 単一の日付 - `YYYY-MM`: 1 か月全体 - `YYYY`: 1 年全体 - `start--end`: 日付範囲（両端を含み、start/end を省略すると無制限）例:* - `--2024-02`: 2024 年 2 月より前のすべての日付 - `2024-05-09, 2024-05-11`: 2024 年 5 月 9 日と 11 日
`disallowDays`	`string`	選択できない曜日をカンマ区切りのリストで指定します。`allowDays` から曜日を除外し、`allow` と `disallow` との共通部分が取られます。空文字列（デフォルト）は効果がありません。有効な曜日: `sunday`、`monday`、`tuesday`、`wednesday`、`thursday`、`friday`、`saturday` 例: `saturday, sunday`（週末を除く）
`name`	`string`	最も近い親のフォーム内で一意となる、フィールドの識別子です。
`type`	`"single" \| "range"`	許可される日付選択のタイプです。 - `single`: 単一の日付を選択します - `range`: 日付範囲を選択します
`value`	`string`	現在選択されている日付です。空文字列は日付が選択されていないことを意味します。 - `type` が `"single"` に設定されている場合は、`YYYY-MM-DD` 形式の単一の日付 - `type` が `"range"` に設定されている場合は、`YYYY-MM-DD--YYYY-MM-DD` 形式の日付範囲（両端を含む）
`view`	`string`	現在表示されている月です（`YYYY-MM` 形式）。変更されると `viewchange` コールバックがトリガーされます。デフォルトは `defaultView` です。
`visibleMonths`	`"auto" \| "1" \| "2"`	表示する月の数を制御します。 - `'auto'`: コンテキストに応じて決まります。現在は `'1'` と同じく 1 か月を描画します。 - `'1'`: 一度に 1 か月を描画します。 - `'2'`: 連続する 2 か月を横に並べて描画します。

Events

Event	型
`blur`	`FocusEvent`
`change`	`Event`
`focus`	`FocusEvent`
`input`	`Event`
`viewchange`	`CustomEvent`

これらのイベントは <SDatePicker> 上で @blur 形式のリスナーで受け取れます。

SDatePicker <s-date-picker> ​

ベストプラクティス ​

例 ​

v-model ​

Props ​

Events ​

SDatePicker `<s-date-picker>`

ベストプラクティス

例

v-model

Props

Events