DatePicker

一个全屏遮罩的日期/时间选择器,支持 'date', 'time', 'datetime' 三种mode。

属性

minDate Date

可以选择的最小时间,isRequired

maxDate Date

可以选择的最大时间,isRequired

date Date

初始化时当前选择的时间,isRequired

mode enum('date', 'time', 'datetime')

支持date, time, datetime三种模式,date为选择日期,time为选择时间,datetime为选择日期和时间,默认为date

minuteInterval enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30)

可选的最小的分钟单位。mode为timedatetime时有效

onDateSelected Function

选择日期完成的回调,参数是选择的日期 Date

titleText string

标题

subTitleText string

副标题

方法

toggle (withAnimate=true)

展示或者隐藏 DatePicker(true 显示动画,false不显示动画)

示例:

    _onPressHandle() {
        this.picker.toggle();
    }

    render() {
      return (

<
View style={{height: Dimensions.get('window').height}}
>
<
TouchableOpacity style={{marginTop: 20}}             onPress={this._onPressHandle.bind(this)}
>
<
Text
>
Click Me
<
/Text
>
<
/TouchableOpacity
>
<
DatePicker
                    ref={picker =
>
 this.picker = picker}
                    date={new Date(2016,5,20)}
                    mode="date"
                    minDate={new Date(2016,4,20)}
                    maxDate={new Date(2016,10,20)}
                    onDateSelected={(date) =
>
 {
                        alert(JSON.stringify(date.getFullYear() + "- " + (date.getMonth() + 1) + "- " + date.getDate()));
                    }}
                /
>
<
/View
>

        );
    }

截图

date

time

datetime

results matching ""

    No results matching ""