DatePickerWidget

DatePickerWidget是在iOS/Android平台上渲染一个日期/时间选择器。这是一个受约束的(Controlled)组件，所以你必须监听onDateChange回调函数并且及时更新date属性来使得组件更新，否则用户的修改会立刻被撤销来确保当前显示值和props.date一致。

属性

date Date

当前被选中的日期。

maximumDate Date

可选的最大日期。

限制可选的日期/时间范围。

minimumDate Date

可选的最小日期。

限制可选的日期/时间范围。

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

可选的最小的分钟单位。

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

选择器模式

onDateChange function

当用户修改日期或时间时调用此回调函数。

唯一的参数是一个日期对象，表示新的日期和时间。

示例

class DatePickerWidgetExample extends Component {
      constructor(props) {
        super(props);
        this.state = {
              date: new Date(2016,8,20),
        };
      }

    _onDateChange(date){
        this.setState({date: date});
    }

    render() {
        return (

<
View style={{height: Dimensions.get('window').height}}
>
<
Text style={{marginTop:64}}
>
DatePickerWidgetExample
<
/Text
>
<
DatePickerWidget
                    ref={picker =
>
 this.picker = picker}
                    date={this.state.date}
                    mode="datetime"
                    minDate={new Date(2016,6,20)}
                    maxDate={new Date(2016,12,20)}
                    minuteInterval={10}
                    onDateChange={this._onDateChange.bind(this)}
                    style={Style.datePicker}
                /
>
<
/View
>

        );
      }
}
let Style = StyleSheet.create({
  datePicker: {
    marginTop: 10,
    borderTopColor: '#ccc',
    borderTopWidth: 1
  },
});

截图