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!