SDateField `<s-date-field>`

Một ô nhập để nhập ngày. SDateField là Vue 3 wrapper có type cho web component <s-date-field> của Shopify Polaris.

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

Best practices

Bắt đầu với một ngày hợp lý. Điền sẵn value bằng ngày hiện có khi chỉnh sửa, hoặc bằng một lựa chọn khả dĩ khi gợi ý.
Giới hạn các ngày hợp lý. Thu hẹp các ngày người bán có thể chọn bằng allow và disallow, chẳng hạn giới hạn trường lên lịch chỉ cho các ngày sắp tới, hoặc trường ngày làm việc chỉ từ thứ Hai đến thứ Sáu.
Giải thích mọi giới hạn trong details. Nêu rõ các yêu cầu như "Must be a future date" để người bán biết quy tắc trước khi chọn.
Viết thông báo error giúp khắc phục được. Khi ngày không hợp lệ, hãy cho người bán biết cách sửa.

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

Ví dụ

Value: (empty)

vue

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

template

<SDateField v-model="value" />

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

template

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

Props

Prop	Kiểu	Mô tả
`allow`	`string`	Các ngày có thể được chọn. Danh sách ngày, khoảng ngày phân tách bằng dấu phẩy. Cho phép khoảng trắng sau dấu phẩy. Giá trị mặc định `''` cho phép mọi ngày. - Ngày ở định dạng `YYYY-MM-DD` cho phép một ngày. - Ngày ở định dạng `YYYY-MM` cho phép cả một tháng. - Ngày ở định dạng `YYYY` cho phép cả một năm. - Khoảng ngày được biểu diễn dưới dạng `start--end`. - Khoảng ngày bao gồm cả hai đầu. - Nếu bỏ qua `start` hoặc `end`, khoảng ngày không bị giới hạn theo hướng đó. - Nếu bỏ qua một phần của ngày ở `start`, phần đó được coi là giá trị nhỏ nhất có thể. Vì vậy `2024--` tương đương với `2024-01-01--`. - Nếu bỏ qua một phần của ngày ở `end`, phần đó được coi là giá trị lớn nhất có thể. Vì vậy `--2024` tương đương với `--2024-12-31`. - Cho phép khoảng trắng ở hai bên `--`.
`allowDays`	`string`	Các ngày trong tuần có thể được chọn. Giá trị này giao với kết quả của `allow` và `disallow`. Danh sách ngày phân tách bằng dấu phẩy. Cho phép khoảng trắng sau dấu phẩy. Giá trị mặc định `''` không ảnh hưởng đến kết quả của `allow` và `disallow`. Các ngày gồm `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.
`autocomplete`	`"bday-day" \| "bday-month" \| "bday-year" \| "bday" \| "cc-expiry-month" \| "cc-expiry-year" \| "cc-expiry"`	Gợi ý về nội dung dự kiến của trường. Khi đặt thành `on` (mặc định), thuộc tính này cho biết trường nên hỗ trợ tự động điền, nhưng bạn không có thêm thông tin ngữ nghĩa nào về nội dung dự kiến. Khi đặt thành `off`, bạn cho biết trường này chứa thông tin nhạy cảm, hoặc nội dung không bao giờ được lưu, như mã dùng một lần. Ngoài ra, bạn có thể cung cấp giá trị mô tả loại dữ liệu cụ thể mà bạn muốn được nhập vào trường này khi tự động điền.
`defaultValue`	`string`	Giá trị ngày ban đầu khi trường được render lần đầu, theo định dạng `YYYY-MM-DD`. Chuỗi rỗng nghĩa là ban đầu không có ngày nào được chọn.
`defaultView`	`string`	Tháng mặc định được hiển thị, ở định dạng `YYYY-MM`. Giá trị này được dùng cho đến khi `view` được đặt, trực tiếp hoặc do tương tác của người dùng. Mặc định là tháng hiện tại theo locale của người dùng.
`details`	`any`	Văn bản bổ sung cung cấp ngữ cảnh hoặc hướng dẫn cho trường. Văn bản này được hiển thị cùng với trường và nhãn của nó để cung cấp thêm thông tin hoặc chỉ dẫn cho người dùng. Văn bản này cũng được cung cấp cho người dùng trình đọc màn hình.
`disabled`	`boolean`	Vô hiệu hóa trường, không cho phép bất kỳ tương tác nào.
`disallow`	`string`	Các ngày không thể được chọn. Các ngày này bị trừ khỏi `allow`. Danh sách ngày, khoảng ngày phân tách bằng dấu phẩy. Cho phép khoảng trắng sau dấu phẩy. Giá trị mặc định `''` không ảnh hưởng đến `allow`. - Ngày ở định dạng `YYYY-MM-DD` không cho phép một ngày. - Ngày ở định dạng `YYYY-MM` không cho phép cả một tháng. - Ngày ở định dạng `YYYY` không cho phép cả một năm. - Khoảng ngày được biểu diễn dưới dạng `start--end`. - Khoảng ngày bao gồm cả hai đầu. - Nếu bỏ qua `start` hoặc `end`, khoảng ngày không bị giới hạn theo hướng đó. - Nếu bỏ qua một phần của ngày ở `start`, phần đó được coi là giá trị nhỏ nhất có thể. Vì vậy `2024--` tương đương với `2024-01-01--`. - Nếu bỏ qua một phần của ngày ở `end`, phần đó được coi là giá trị lớn nhất có thể. Vì vậy `--2024` tương đương với `--2024-12-31`. - Cho phép khoảng trắng ở hai bên `--`.
`disallowDays`	`string`	Các ngày trong tuần không thể được chọn. Giá trị này bị trừ khỏi `allowDays` và giao với kết quả của `allow` và `disallow`. Danh sách ngày phân tách bằng dấu phẩy. Cho phép khoảng trắng sau dấu phẩy. Giá trị mặc định `''` không ảnh hưởng đến `allowDays`. Các ngày gồm `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.
`error`	`any`	Báo lỗi cho người dùng. Trường sẽ được áp dụng kiểu hiển thị riêng để thông báo các vấn đề cần được giải quyết ngay.
`id`	`string`	Định danh duy nhất của phần tử.
`label`	`any`	Nội dung dùng làm nhãn của trường.
`labelAccessibilityVisibility`	`"visible" \| "exclusive"`	Thay đổi khả năng hiển thị của nhãn của component. - `visible`: nhãn hiển thị với mọi người dùng. - `exclusive`: nhãn bị ẩn về mặt thị giác nhưng vẫn nằm trong cây trợ năng (accessibility tree).
`name`	`string`	Định danh cho trường, là duy nhất trong form chứa nó gần nhất.
`placeholder`	`string`	Gợi ý ngắn mô tả giá trị mong đợi của trường.
`readOnly`	`boolean`	Người dùng không thể chỉnh sửa trường. Trường vẫn có thể nhận focus và sẽ được trình đọc màn hình thông báo.
`required`	`boolean`	Trường có bắt buộc phải có giá trị hay không. Yêu cầu này bổ sung giá trị ngữ nghĩa cho trường, nhưng sẽ không tự động hiển thị lỗi. Nếu muốn hiển thị lỗi khi trường này trống, bạn có thể dùng thuộc tính `error`.
`value`	`string`	Ngày đang được chọn, theo định dạng `YYYY-MM-DD`. Chuỗi rỗng nghĩa là chưa chọn ngày nào.
`view`	`string`	Tháng đang hiển thị, ở định dạng `YYYY-MM`. `onViewChange` được gọi khi giá trị này thay đổi. Mặc định là `defaultView`.

Events

Event	Kiểu
`blur`	`Event`
`change`	`Event`
`focus`	`Event`
`input`	`Event`
`invalid`	`CustomEvent`
`viewchange`	`CustomEvent`

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

Slots

Slot	Mô tả
`details`
`error`

SDateField <s-date-field> ​

Best practices ​

Ví dụ ​

v-model ​

Props ​

Events ​

Slots ​