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

DatePicker

Cập nhật lần cuối:

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

Properties​

DatePicker​

NameTypeDefaultDescription
valueDateNgày được chọn
defaultValueDateNgày mặc định
startDateDateNgày bắt đầu
endDateDateNgày kết thúc
startYearnumberNăm bắt đầu
endYearnumberNăm kết thúc
localestringGiá trị locale sử dụng ngôn ngữ của DatePicer theo Intl.DateTimeFormat
dateFormatstringDate 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)
titlestringĐặt title cho date picker modal
defaultOpenbooleanMặc định mở date picker modal hay không
disabledbooleanVô 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) => voidThêm event handler khi modal thay đổi trạng thái mở/đóng
formatPickedValueDisplay(date: Date) => stringFormat hiển thị ngày đã chọn trên input
maskbooleanBật/tắt lớp overlay khi mở date picker modal
maskCloseablebooleanClick ra ngoài modal vào lớp overlay để đóng
actionDatePickerActionTypeThêm action button cho date picker modal
prefixReactNodePrefix icon cho Input
suffixReactNodeSuffix icon cho Input
inputClassstringthêm class cho Input
labelstringThêm Label hiển thị phía trên Input
helperTextstringHelper text hiển thị phía dưới của field input.
errorTextstringText hiển thị khi status của field input là error
statusInputStatusTrạng thái của field input. Nhận các giá trị: success | error
namestringThêm name cho input field
placeholderstringThêm placeholder cho input trong trường hợp không có option nào đã được chọn

Type​

DatePickerActionType​

NameTypeDefaultDescription
textstringAction button text
onClickThêm event handler cho sự kiện click button
closebooleanClick vào button để đóng date picker modal

Example​

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

export default function PageDatePicker() {
  return (
    
      <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}>
        
      </Box>
      <Box mt={6}>
        
      </Box>
      <Box mt={6}>
        
      </Box>
    
  );
}