SDatePicker <s-date-picker>

Một lịch để chọn một ngày hoặc một khoảng ngày. SDatePicker là Vue 3 wrapper có type cho web component <s-date-picker> của Shopify Polaris.

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

Best practices

• Bắt đầu với một ngày hợp lý. Điền sẵn value để người bán chọn nhanh hơn.
• Cung cấp lối tắt cho các lựa chọn phổ biến. Các preset như "Today", "Last 7 days" hay "This month" giúp người bán khỏi phải nhấp qua từng trang lịch.
• Dùng type="range" cho ngày bắt đầu và ngày kết thúc. Chọn theo khoảng phù hợp với báo cáo, phân tích và các bộ lọc khác dựa trên một khoảng thời gian.
• Chặn những ngày không áp dụng. Dùng allow và disallow để người bán không thể chọn những ngày không hợp lệ với trường hợp sử dụng của bạn.
• Chừa khoảng trống quanh picker. Cho nó đủ không gian để không cản trở bàn phím ảo hoặc các phần tử tương tác khác.
• Tính đến những ngày ở xa. Lật từng tháng một trở nên tẻ nhạt khi vượt quá vài năm, vì vậy với những ngày nằm ngoài khoảng 5–10 năm, hãy cung cấp preset hoặc cho phép người bán nhập năm trực tiếp.

<SDatePicker type="range" />

Xem best practices của Shopify cho <s-date-picker> (tiếng Anh) để có hướng dẫn đầy đủ.

Ví dụ

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 trên <SDatePicker> gắn với property value và lắng nghe DOM event input.

<SDatePicker v-model="value" />

tương đương với:

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

Props

Prop	Kiểu	Mô tả
allow	string	Chỉ định những ngày có thể được chọn, dưới dạng danh sách phân tách bằng dấu phẩy. Chuỗi rỗng (mặc định) cho phép mọi ngày. Định dạng:* - YYYY-MM-DD: Một ngày - YYYY-MM: Cả tháng - YYYY: Cả năm - start--end: Khoảng ngày (bao gồm cả hai đầu, không giới hạn nếu bỏ qua start/end) Ví dụ:* - 2024-02--2025: Từ tháng 2 năm 2024 đến hết năm 2025 - 2024-05-09, 2024-05-11: Chỉ ngày 9 và 11 tháng 5 năm 2024
allowDays	string	Chỉ định những ngày trong tuần có thể được chọn, dưới dạng danh sách phân tách bằng dấu phẩy. Giới hạn thêm các ngày từ allow và disallow. Chuỗi rỗng (mặc định) không có tác dụng. Các ngày hợp lệ*: sunday, monday, tuesday, wednesday, thursday, friday, saturday Ví dụ:* saturday, sunday (chỉ cuối tuần)
defaultValue	string	(Các) ngày được chọn ban đầu khi component được render lần đầu. Chuỗi rỗng nghĩa là ban đầu không có ngày nào được chọn. - Một ngày theo định dạng YYYY-MM-DD khi type được đặt là "single" - Khoảng ngày theo định dạng YYYY-MM-DD--YYYY-MM-DD (bao gồm cả hai đầu) khi type được đặt là "range"
defaultView	string	Tháng mặc định để hiển thị, theo định dạng YYYY-MM. Được dùng cho đến khi callback view được đặt bởi tương tác của người dùng hoặc bằng code. Mặc định là tháng hiện tại theo locale của người dùng.
disallow	string	Chỉ định những ngày không thể được chọn, dưới dạng danh sách phân tách bằng dấu phẩy. Các ngày này bị loại khỏi những ngày được chỉ định trong allow. Chuỗi rỗng (mặc định) không có tác dụng. Định dạng:* - YYYY-MM-DD: Một ngày - YYYY-MM: Cả tháng - YYYY: Cả năm - start--end: Khoảng ngày (bao gồm cả hai đầu, không giới hạn nếu bỏ qua start/end) Ví dụ:* - --2024-02: Mọi ngày trước tháng 2 năm 2024 - 2024-05-09, 2024-05-11: Ngày 9 và 11 tháng 5 năm 2024
disallowDays	string	Chỉ định các ngày trong tuần không thể chọn, dưới dạng danh sách phân tách bằng dấu phẩy. Loại các ngày này khỏi allowDays và lấy giao với allow và disallow. Chuỗi rỗng (mặc định) không có tác dụng. Các ngày hợp lệ*: sunday, monday, tuesday, wednesday, thursday, friday, saturday Ví dụ:* saturday, sunday (không có cuối tuần)
name	string	Định danh cho trường, là duy nhất trong form chứa nó gần nhất.
type	"single" | "range"	Kiểu chọn ngày được cho phép. - single: Chọn một ngày - range: Chọn một khoảng ngày
value	string	(Các) ngày đang được chọn. Chuỗi rỗng nghĩa là chưa chọn ngày nào. - Một ngày theo định dạng YYYY-MM-DD khi type được đặt là "single" - Khoảng ngày theo định dạng YYYY-MM-DD--YYYY-MM-DD (bao gồm cả hai đầu) khi type được đặt là "range"
view	string	Tháng đang hiển thị, theo định dạng YYYY-MM. Khi thay đổi, callback viewchange sẽ được kích hoạt. Mặc định là defaultView.
visibleMonths	"auto" | "1" | "2"	Kiểm soát số tháng được hiển thị. - 'auto': Tùy theo ngữ cảnh. Hiện tại sẽ render một tháng, giống '1'. - '1': Render một tháng mỗi lần. - '2': Render hai tháng liên tiếp cạnh nhau.

Events

Event	Kiểu
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event
viewchange	CustomEvent

Lắng nghe các event này bằng listener dạng @blur trên <SDatePicker>.