Chuyển tới nội dung chính

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

PropTypeDefaultDescription
default-valueDateGía trị khởi tạo cho DatePicker
localestringGiá trị locale sử dụng ngôn ngữ của DatePicer theo Intl.DateTimeFormat
date-formatstringDate format hiển thị trên input. ví dụ: dd/mm/yyyy hh::mm A
  • Ngày: dd
  • Tháng: mm, m, MM (kiểu chữ), M (kiểu chữ tắt)
  • Năm: yyyy, yy
  • Giờ: H, HH (24h), h, hh (12h)
  • Phút: :m, :mm
  • am/pm: a
  • AM/PM: A
date-time-pickerbooleanfalseDate Time picker
date-pickerbooleantrueDate Picker
start-yearnumberNăm bắt đầu
end-yearnumberNăm kết thúc
min-stepnumberBước nhảy phút khi sử dụng Date Time Picker
is24-hoursbooleanChế độ 24h khi sử dụng Date Time picker
placeholderstringDatePicker input placeholder
titlestringDatePicker title
labelstringLabel cho input picker
infostringThêm thông tin thêm về picker
namestringInput name
input-styleobjectTùy chỉnh style cho input element
clear-buttonbooleanfalseThêm nút xóa giá trị của input khi người dùng click/press
input-idstringID cho DatePicker. Lưu ý: Mỗi picker cần truyền ID
action-textstringNội dung Action Button

DatePicker Events

EventDescription
@actionEvent handler khi người dùng click lên action
@changeEvent handler xử lý sự kiện khi giá trị picker thay đổi
@closeEvent handler xử lý sự kiện đóng picker
@openEvent handler xử lý sự kiện mở picker
@focusEvent handler xử lý sự kiện focus vào input
@blurEvent handler xử lý sự kiện blur ra khỏi input
@input:emptyEvent handler xử lý sự kiện khi input trở thành rỗng
@input:notemptyEvent handler xử lý sự kiện khi input có giá trị
@input:clearEvent handler xử lý sự kiện khi user nhấn clear button

Ví dụ

Code demo fallback when rendering server side!