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
value	Date		Ngày được chọn
defaultValue	Date		Ngày mặc định
startDate	Date		Ngày bắt đầu
endDate	Date		Ngày kết thúc
startYear	number		Năm bắt đầu
endYear	number		Năm kết thúc
locale	string		Giá trị locale sử dụng ngôn ngữ của DatePicer theo Intl.DateTimeFormat
dateFormat	string		Date format hiển thị trên input. ví dụ: dd/mm/yyyy Ngày: dd Tháng: mm, m, MM (kiểu chữ), M (kiểu chữ tắt) Năm: yyyy, yy
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 column ngày (DD), tháng (MM), năm (YYYY)
title	string		Đặt title cho date picker modal
defaultOpen	boolean		Mặc định mở date picker modal hay không
disabled	boolean		Vô hiệu hoá Picker input
onChange	(value: Date, pickedValue: {[name: string]: }) => void;		Thêm event handler khi thay đổi lựa chọn
onVisibilityChange	(visibilityState: boolean) => void		Thêm event handler khi modal thay đổi trạng thái mở/đóng
formatPickedValueDisplay	(date: Date) => string		Format hiển thị ngày đã chọn trên input
mask	boolean		Bật/tắt lớp overlay khi mở date picker modal
maskCloseable	boolean		Click ra ngoài modal vào lớp overlay để đóng
action	DatePickerActionType		Thêm action button cho date picker modal
prefix	ReactNode		Prefix icon cho Input
suffix	ReactNode		Suffix icon cho Input
inputClass	string		thêm class cho Input
label	string		Thêm Label hiển thị phía trên Input
helperText	string		Helper text hiển thị phía dưới của field input.
errorText	string		Text hiển thị khi status của field input là error
status	InputStatus		Trạng thái của field input. Nhận các giá trị: success | error
name	string		Thêm name cho input field
placeholder	string		Thêm placeholder cho input trong trường hợp không có option nào đã được chọn

Type

DatePickerActionType

Name	Type	Default	Description
text	string		Action button text
onClick			Thêm event handler cho sự kiện click button
close	boolean		Click vào button để đóng date picker modal

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>
  );
}