DatePicker 日期选择器

更新时间:2024-06-05 03:14:31下载pdf

在涂鸦设备控制面板中,选择时间和日期是一项常见的需求。DatePicker是一个灵活的,支持多种模式的时间日期选择组件。

代码演示

说明:详细示例参考 DatePicker Demo

受控

在选择过程中 DatePicker 会将当前选择的值作为 onDateChange 回调的参数传回。DatePicker 的值取决于传入的 date,因此我们需要将传回的值手动重新传给组件,完成选择。

下方示例中,DatePicker 是一个受控组件,有关受控组件的解释参见 Forms

import React from 'react';
import { View } from 'react-native';
import { DatePicker } from 'tuya-panel-kit';

export default class DatePickerDemo extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      selectDate: new Date();
    }
  }
  render() {
    return (
      <View style={styles.wrApper}>
        <DatePicker
          date={this.state.selectDate}
          onDateChange={selectDate => this.setState({ selectDate })}
          style={styles.datePickerStyle}
        />
      </View>
    )
  }
}

非受控

下方示例中 DatePicker 是一个非受控组件,有关非受控组件的详情参见 Uncontrolled Components

DatePicker 的值取决于内部的 state

import React from "react";
import { View } from "react-native";
import { DatePicker } from "tuya-panel-kit";

const DatePickerDemo = () => (
  <View style={styles.wrApper}>
    <DatePicker
      defaultDate={new Date()}
      onDateChange={(date) => console.log(date)}
      style={styles.datePickerStyle}
    />
  </View>
);

交互演示

DatePicker 日期选择器

API

style

指定包裹 datePicker 的容器样式。

类型 必传
ViewPropTypes.style

mode

选择器的选择类型。

  • date:日期选择(年月日)。
  • time:时间选择(时分)。
  • datetime:日期 + 时间选择(年月日时分)。
  • year:年份选择(年)。
  • month:月份选择(年月)。
类型(Type) 必传(Required)
enum: ‘date’, ‘time’, ‘datetime’, ‘year’, ‘month’

loop

选择 picker 是否可循环。

类型 必传 默认
bool false

pickerFontColor

picker 里字体颜色。

类型 必传 默认值
ColorPropType #333

date

当前选中的值,设置了该属性即为受控组件。

类型 必传
Date

defaultDate

默认选中的值。

类型 必传
Date

minDate

设置最小可选择的值。

类型 必传 默认值
Date 2000/01/01

maxDate

设置最大可选择的值。

类型 必传 默认值
Date 2030/12/31

use12Hours

是否为 12 小时制。

类型 必传 默认值
bool false

isAmpmFirst

选择上午或下午的列是否为第一个选择列。只有当use12Hourstrue 时生效。

类型 必传 默认值
bool false

isTimeFirst

小时分钟选择项是否位于 、之前。

类型 必传 默认值
bool false

locale

多语言设置。

  • cn:中文,有单位显示。
  • en:英文,无单位显示。
  • ILocale:多语言对象,可复写默认 Key 对应的语言值。
interface ILocale {
  am?: string;
  pm?: string;
  year?: string;
  month?: string;
  day?: string;
  hour?: string;
  minute?: string;
}
类型 必传 默认值
enum: ‘cn’, ‘en’ ILocale

dateSortKeys

年月日选择项排序规则,默认为年/月/日['month', 'day', 'year']  此项排序规则为月/日/年

类型 必传 默认值
Array null

onValueChange

某一项被选中时执行此回调。调用时带有如下参数。

  • value:被选中的 value 值。
  • index:改变值所在的列位于datePicker 的列数。
类型 必传
(value, index) => void

onDateChange

某一项被选中时执行此回调。调用时带有如下参数。

  • date: 更改后完整的日期或时间。
类型 必传
(date) => void