DatePicker

Cập nhật lần cuối: 27/05/2022

Tạo giao diện cho phép người dùng lựa chọn ngày tháng

Properties

DatePicker

Name	Type	Default	Description
action	DatePickerActionType		Thêm action button cho hộp thoại date picker.
columnsFormat	'MM-DD-YYYY' | 'DD-MM-YYYY' | 'YYYY-MM-DD'		Sắp xếp vị trí xuất hiện tương ứng của các cột ngày, tháng, năm trong date picker. DD tương ứng với cột ngày, MM tương ứng với cột tháng, YYYY tương ứng với cột năm.
dateFormat	string		Định dạng ngày tháng năm của date picker input. Ngày: dd Tháng: mm, m, MM (kiểu chữ), M (kiểu chữ tắt) Năm: yyyy, yy
defaultOpen	boolean	false	Mặc định mở hộp thoại date picker khi khởi tạo.
defaultValue	Date		Ngày mặc định được chọn sẵn khi khởi tạo date picker. Lưu ý: thay đổi giá trị của defaultValue sau khi khởi tạo date picker sẽ không có tác dụng.
disabled	boolean	false	Vô hiệu hóa input date picker.
endDate	Date		Ngày kết thúc của date picker. Người dùng sẽ không thể chọn ngày sau ngày này.
endYear	number		Năm kết thúc của date picker. Người dùng sẽ không thể chọn năm sau năm này.
errorText	string		Error text là phần văn bản ngắn nằm dưới các ô nhập liệu. Nội dung của các văn bản này thường chứa thông tin cảnh báo về lỗi của dữ liệu được nhập vào, cũng như hướng dẫn cách khắc phục. errorText sẽ được hiển thị thay cho helperText khi status có giá trị là error.
formatPickedValueDisplay	(date: Date) => string		Hàm dùng để định dạng nội dung hiển thị của input date picker dựa trên giá trị ngày đang chọn. Khác với dateFormat là một chuỗi định dạng ngày tháng năm, formatPickedValueDisplay là một hàm nhận vào giá trị ngày đang chọn và trả về chuỗi hiển thị, và chuối hiển thị này có thể không phải là ngày tháng năm.
helperText	string		Helper text là phần văn bản ngắn nằm dưới các ô nhập liệu. Nội dung của các văn bản này thường chứa thông tin hướng dẫn giúp người dùng hiểu rõ hơn về tác dụng hoặc mô tả định dạng của dữ liệu được khuyến khích nhập vào.
inputClass	string		Thêm CSS class cho input của date picker.
label	string		Nhãn của input date picker. Sẽ được hiển thị phía trên input.
locale	string		Ngôn ngữ hiển thị của date picker, được truyền vào dưới dạng mã ngôn ngữ BCP 47, ví dụ: vi-VN, en-US.
mask	boolean	true	Mask là một lớp overlay màu xám được phủ lên các thành phần bên dưới hộp thoại date picker, ngăn không cho người dùng tương tác với các nội dung đó và tập trung vào hộp thoại được mở.
maskClosable	boolean	true	Tự động đóng hộp thoại date picker khi người dùng nhấn vào mask. Cần phải bật thuộc tính mask để sử dụng tính năng này.
placeholder	string		Placeholder của input date picker. Được hiển thị khi chưa có giá trị.
prefix	ReactNode		Thêm nội dung vào đầu input của date picker. Thường được sử dụng để hiển thị icon.
startDate	Date		Ngày bắt đầu của date picker. Người dùng sẽ không thể chọn ngày trước ngày này.
startYear	number		Năm bắt đầu của date picker. Người dùng sẽ không thể chọn năm trước năm này.
status	'' | 'error' | 'success'	''	Trạng thái hiện tại của input date picker. Nếu là error, input sẽ có màu cảnh báo kèm theo errorText, ngược lại input sẽ có màu trung hoà kèm theo helperText.
suffix	ReactNode		Thêm nội dung vào cuối input của date picker. Thường được sử dụng để hiển thị icon.
title	string		Tiêu đề của hộp thoại date picker.
value	Date		Ngày được chọn. Cần được sử dụng cùng với onChange để cập nhật lại giá trị cho date picker sau khi người dùng thay đổi.
onChange	(value: Date, pickedValue: { { [name: string]: OptionValueType } }) => void		Callback được gọi khi người dùng thay đổi giá trị của date picker. Tham số truyền vào là giá trị mới của date picker.
onVisibilityChange	(visibilityState: boolean) => void		Callback được gọi khi người dùng mở / đóng hộp thoại date picker.

Type

DatePickerActionType

Name	Type	Default	Description
close	boolean	false	Nhấn vào nút sẽ đóng hộp thoại date picker.
text	string		Chữ trên nút.
onClick	(event: React.MouseEvent) => void		Callback được gọi khi nhấn vào nút.

Example

Open Sandbox

import React from "react";
import { Box, Text, DatePicker, Page } from "zmp-ui";

export default function PageDatePicker() {
  return (
    <Page className="section-container">
      <Text.Title size="small">Date Picker</Text.Title>
      <Box mt={2}>
        <Text size="xSmall" className="input-desc">
          Để chọn nội dung ngày/tháng/năm
        </Text>
        <Text size="xSmall" className="input-desc">
          Bấm chỗ nào cũng trigger chung 1 action, ko cho nhập text
        </Text>
      </Box>
      <Box mt={6}>
        <DatePicker
          label="Label"
          helperText="Helper text"
          mask
          maskClosable
          dateFormat="dd/mm/yyyy"
          title="DatePicker"
        />
      </Box>
      <Box mt={6}>
        <DatePicker
          mask
          maskClosable
          dateFormat="dd/mm/yyyy"
          title="DatePicker"
        />
      </Box>
      <Box mt={6}>
        <DatePicker
          mask
          maskClosable
          locale="en"
          label="DatePicker With Locale"
          dateFormat="dd/mm/yyyy"
          title="Test picker"
        />
      </Box>
    </Page>
  );
}