iOS 日期选择器

使用 DatePickerIOS 来在 iOS 上呈现一个日期/时间选择器(selector)。这是一个控制组件，所以为了组件更新，你必须钩在 onDateChange 回调中，并更新 date 支持，否则用户的变化将立即恢复以反映 props.date。

Props

Edit on GitHub

date 日期型

当前选中的日期。

maximumDate 日期型

最大的日期。

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

minimumDate 日期型

最小的日期。

限制了可能的日期/时间值的范围。

minuteInterval 枚举型(1,2,3,4,5,6,10,12,15,20,30)

可选择的分钟的间隔。

mode 枚举型(“date”,“time”,“datetime”)

日期选择器模式。

onDateChange 函数型

日期变更处理程序。

当用户更改了 UI 的日期或时间时，它就会被调用。第一个也是唯一一个参数是一个 Date 对象，代表了新的日期和时间。

timeZoneOffsetInMinutes 数字型

在几分钟内时区偏移。

默认情况下，日期选择器将使用设备的时区。有了这个参数，才有可能迫使某个时区偏移。例如，为了显示太平洋的标准时间，传递 -7 * 60。

例子

Edit on GitHub

1. 'use strict';
2. var React = require('react-native');
3. var {
4. DatePickerIOS,
5. StyleSheet,
6. Text,
7. TextInput,
8. View,
9. } = React;
10. var DatePickerExample = React.createClass({
11. getDefaultProps: function () {
12. return {
13. date: new Date(),
14. timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
15. };
16. },
17. getInitialState: function() {
18. return {
19. date: this.props.date,
20. timeZoneOffsetInHours: this.props.timeZoneOffsetInHours,
21. };
22. },
23. onDateChange: function(date) {
24. this.setState({date: date});
25. },
26. onTimezoneChange: function(event) {
27. var offset = parseInt(event.nativeEvent.text, 10);
28. if (isNaN(offset)) {
29. return;
30. }
31. this.setState({timeZoneOffsetInHours: offset});
32. },
33. render: function() {
34. // Ideally, the timezone input would be a picker rather than a
35. // text input, but we don't have any pickers yet :(
36. return (
37. <View>
38. <WithLabel label="Value:">
39. <Text>{
40. this.state.date.toLocaleDateString() +
41. ' ' +
42. this.state.date.toLocaleTimeString()
43. }</Text>
44. </WithLabel>
45. <WithLabel label="Timezone:">
46. <TextInput
47. onChange={this.onTimezoneChange}
48. style={styles.textinput}
49. value={this.state.timeZoneOffsetInHours.toString()}
50. />
51. <Text> hours from UTC</Text>
52. </WithLabel>
53. <Heading label="Date + time picker" />
54. <DatePickerIOS
55. date={this.state.date}
56. mode="datetime"
57. timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
58. onDateChange={this.onDateChange}
59. />
60. <Heading label="Date picker" />
61. <DatePickerIOS
62. date={this.state.date}
63. mode="date"
64. timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
65. onDateChange={this.onDateChange}
66. />
67. <Heading label="Time picker, 10-minute interval" />
68. <DatePickerIOS
69. date={this.state.date}
70. mode="time"
71. timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
72. onDateChange={this.onDateChange}
73. minuteInterval={10}
74. />
75. </View>
76. );
77. },
78. });
79. var WithLabel = React.createClass({
80. render: function() {
81. return (
82. <View style={styles.labelContainer}>
83. <View style={styles.labelView}>
84. <Text style={styles.label}>
85. {this.props.label}
86. </Text>
87. </View>
88. {this.props.children}
89. </View>
90. );
91. }
92. });
93. var Heading = React.createClass({
94. render: function() {
95. return (
96. <View style={styles.headingContainer}>
97. <Text style={styles.heading}>
98. {this.props.label}
99. </Text>
100. </View>
101. );
102. }
103. });
104. exports.title = '<DatePickerIOS>';
105. exports.description = 'Select dates and times using the native UIDatePicker.';
106. exports.examples = [
107. {
108. title: '<DatePickerIOS>',
109. render: function(): ReactElement {
110. return <DatePickerExample />;
111. },
112. }];
113. var styles = StyleSheet.create({
114. textinput: {
115. height: 26,
116. width: 50,
117. borderWidth: 0.5,
118. borderColor: '#0f0f0f',
119. padding: 4,
120. fontSize: 13,
121. },
122. labelContainer: {
123. flexDirection: 'row',
124. alignItems: 'center',
125. marginVertical: 2,
126. },
127. labelView: {
128. marginRight: 10,
129. paddingVertical: 2,
130. },
131. label: {
132. fontWeight: '500',
133. },
134. headingContainer: {
135. padding: 4,
136. backgroundColor: '#f6f7f8',
137. },
138. heading: {
139. fontWeight: '500',
140. fontSize: 14,
141. },
142. });