Use DatePickerIOS to render a date/time picker (selector) on iOS. This is a controlled component, so you must hook in to the onDateChange callback and update the date prop in order for the component to update, otherwise the user's change will be reverted immediately to reflect props.date as the source of truth.

Props

View props...

date Date

The currently selected date.

maximumDate Date

Maximum date.

Restricts the range of possible date/time values.

minimumDate Date

Minimum date.

Restricts the range of possible date/time values.

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

The interval at which minutes can be selected.

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

The date picker mode.

onDateChange function

Date change handler.

This is called when the user changes the date or time in the UI. The first and only argument is a Date object representing the new date and time.

timeZoneOffsetInMinutes number

Timezone offset in minutes.

By default, the date picker will use the device's timezone. With this parameter, it is possible to force a certain timezone offset. For instance, to show times in Pacific Standard Time, pass -7 * 60.

Examples

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

timeZoneOffsetInMinutes number Timezone offset in minutes. By default, the date picker will use

2025-01-10 15:47:30
DatePickerIOS#date
  • References/JavaScript/React Native/Components: DatePickerIOS

date Date The currently selected date.

2025-01-10 15:47:30
DatePickerIOS#minuteInterval
  • References/JavaScript/React Native/Components: DatePickerIOS

minuteInterval enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30) The interval at which minutes can be selected

2025-01-10 15:47:30
DatePickerIOS#onDateChange
  • References/JavaScript/React Native/Components: DatePickerIOS

onDateChange function Date change handler. This is called when the user changes the date or time

2025-01-10 15:47:30
DatePickerIOS#minimumDate
  • References/JavaScript/React Native/Components: DatePickerIOS

minimumDate Date Minimum date. Restricts the range of possible date/time values.

2025-01-10 15:47:30
DatePickerIOS#maximumDate
  • References/JavaScript/React Native/Components: DatePickerIOS

maximumDate Date Maximum date. Restricts the range of possible date/time values.

2025-01-10 15:47:30
DatePickerIOS#mode
  • References/JavaScript/React Native/Components: DatePickerIOS

mode enum('date', 'time', 'datetime') The date picker mode.

2025-01-10 15:47:30