DatePickerIOS

DatePickerIOS

日期选择控件

属性

@H_502_10@ 名称 类型 意义 默认值 date Date 当前选择的日期基础 无默认值，必须显式设置 minimumDate Date 选择范围的最小值 无 maximumDate Date 选择范围的最大值 无 minuteInterval enum 分钟选择的间隔in(1,2,3,4,5,6,10,12,15,20,30) 1 mode enum 选择器的模式(‘date’,‘time’,‘datetime’) datetime timeZoneOffsetInMinutes number 时区偏移量，以分钟为标准 采用设备的时区

函数

• onDateChange :时间改变时调用

默认显示

源码

'use strict'@H_403_98@;

var@H_403_98@ React = require@H_403_98@('react-native'@H_403_98@);
var@H_403_98@ {
    DatePickerIOS,AppRegistry,StyleSheet,View,} = React;

var@H_403_98@ helloworld = React.createClass({
    render: function@H_403_98@()@H_403_98@ {@H_403_98@
    return@H_403_98@ (
        <DatePickerIOS @H_403_98@ date@H_403_98@ = { new@H_403_98@ Date@H_403_98@()} />@H_403_98@ ); } }); var styles = StyleSheet.create({ }); AppRegistry.registerComponent('hellowrold',() => helloworld); @H_403_98@

默认样式

属性的使用

mode

time

<DatePickerIOS
        date@H_403_98@ = { new@H_403_98@ Date@H_403_98@()}
        mode="time"@H_403_98@
        />

datetime

<DatePickerIOS
        date@H_403_98@ = { new@H_403_98@ Date@H_403_98@()}
        mode="datetime"@H_403_98@
        />

date

<DatePickerIOS
        date@H_403_98@ = { new@H_403_98@ Date@H_403_98@()}
        mode="date"@H_403_98@
        />

minuteInterval

这个属性只能在分钟出现的选择器中才会起作用，当mode="date"是不起作用的。

mode=”time”

<DatePickerIOS
        date@H_403_98@ = { new@H_403_98@ Date@H_403_98@()}
        mode="time"@H_403_98@
        minuteInterval={3@H_403_98@}
        />

mode=”datetime”

<DatePickerIOS
        date@H_403_98@ = { new@H_403_98@ Date@H_403_98@()}
        mode="datetime"@H_403_98@
        minuteInterval={3@H_403_98@}
        />

onDateChange

选择时间时，该属性设置的函数会被调用

onDateChange: function(date@H_403_98@) {
    console.@H_403_98@log@H_403_98@('doctorq'@H_403_98@);
    this.@H_403_98@setState({date@H_403_98@: date@H_403_98@});
    },...@H_403_98@...@H_403_98@
<@H_403_98@DatePickerIOS
        date@H_403_98@ =@H_403_98@ { new@H_403_98@ Date@H_403_98@()}
        mode=@H_403_98@"datetime"@H_403_98@
        onDateChange=@H_403_98@{this.@H_403_98@onDateChange}
        /@H_403_98@>@H_403_98@

选择时间后，控制台打印信息如下：

2015-09-01 19:21:57.391 [info@H_403_98@][tid:com.facebook.React.JavaScript@H_403_98@] 'doctorq'
2015-09-01 19:22:00.575 [info@H_403_98@][tid:com.facebook.React.JavaScript@H_403_98@] 'doctorq'
2015-09-01 19:22:04.141 [info@H_403_98@][tid:com.facebook.React.JavaScript@H_403_98@] 'doctorq'

timeZoneOffsetInMinutes

<DatePickerIOS
        date@H_403_98@ = { new@H_403_98@ Date@H_403_98@()}
        mode="time"@H_403_98@
        timeZoneOffsetInMinutes={(-2@H_403_98@) * (new@H_403_98@ Date@H_403_98@()).getTimezoneOffset()}
        />

我现在的时间是北京时间下午7点31.如果我们用上面的代码，就会变成上午3点31，时区的定义我们不讨论，我们只是看timeZoneOffsetInMinutes改变的效果：