DatePicker
Cú pháp
<zmp-date-picker />
Component DatePicker giúp người dùng chọn ngày, tháng, năm.
DatePicker Properties
Prop | Type | Default | Description |
---|---|---|---|
default-value | Date | Gía trị khởi tạo cho DatePicker | |
locale | string | Giá trị locale sử dụng ngôn ngữ của DatePicer theo Intl.DateTimeFormat | |
date-format | string | Date format hiển thị trên input. ví dụ: dd/mm/yyyy hh::mm A
| |
date-time-picker | boolean | false | Date Time picker |
date-picker | boolean | true | Date Picker |
start-year | number | Năm bắt đầu | |
end-year | number | Năm kết thúc | |
min-step | number | Bước nhảy phút khi sử dụng Date Time Picker | |
is24-hours | boolean | Chế độ 24h khi sử dụng Date Time picker | |
placeholder | string | DatePicker input placeholder | |
title | string | DatePicker title | |
label | string | Label cho input picker | |
info | string | Thêm thông tin thêm về picker | |
name | string | Input name | |
input-style | object | Tùy chỉnh style cho input element | |
clear-button | boolean | false | Thêm nút xóa giá trị của input khi người dùng click/press |
input-id | string | ID cho DatePicker. Lưu ý: Mỗi picker cần truyền ID | |
action-text | string | Nội dung Action Button |
DatePicker Events
Event | Description |
---|---|
@action | Event handler khi người dùng click lên action |
@change | Event handler xử lý sự kiện khi giá trị picker thay đổi |
@close | Event handler xử lý sự kiện đóng picker |
@open | Event handler xử lý sự kiện mở picker |
@focus | Event handler xử lý sự kiện focus vào input |
@blur | Event handler xử lý sự kiện blur ra khỏi input |
@input:empty | Event handler xử lý sự kiện khi input trở thành rỗng |
@input:notempty | Event handler xử lý sự kiện khi input có giá trị |
@input:clear | Event handler xử lý sự kiện khi user nhấn clear button |
Ví dụ
Code demo fallback when rendering server side!