DatePicker时间选择器

DatePicker 时间选择器

概述

1.0开始加入

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

代码演示

受控

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会将当前选择的值作为onDateChange回调的参数传回。
上面的例子中,DatePicker是一个受控组件,有关受控组件的解释可以参考这里:Forms
DatePicker的值取决于传入的date,因此我们需要将传回的值手动重新传给组件,这样就完成了一次选择。

非受控

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是一个非受控组件,有关非受控组件的解释可以参考这里:Uncontrolled Components
DatePicker的值取决于内部的state。

交互演示

API

style

指定包裹datePicker的容器样式

类型(Type) 必传(Required)
ViewProptypes.style

mode

选择器的选择类型:

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

date

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

类型(Type) 必传(Required)
Date

defaultDate

默认选中的值

类型(Type) 必传(Required)
Date

minDate

设置最小可选择的值

类型(Type) 必传(Required) 默认值
Date 2000/01/01

maxDate

设置最大可选择的值

类型(Type) 必传(Required) 默认值
Date 2030/12/31

use12Hours

是否为12小时制

类型(Type) 必传(Required) 默认值
bool false

isAmpmFirst

选择上午下午的列是否为第一个选择列,只有当use12Hours为true时生效

类型(Type) 必传(Required) 默认值
bool false

locale

多语言设置:

  • cn:中文,有单位显示
  • en:其他,无单位显示
类型(Type) 必传(Required) 默认值
enum: ‘cn’, ‘en’ ‘en’

onValueChange

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

  • value: 被选中的value值
  • index:改变值所在的列在整个datePicker中是第几列
类型(Type) 必传(Required)
(value, index) => void

onDateChange

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

  • date: 改变后完整的日期或是时间
类型(Type) 必传(Required)
(date) => void

注意

日期字符串在不同浏览器有不同的实现。

电话咨询

在线咨询

400-881-8611