react-native/website/versioned_docs/0.21/timepickerandroid.md

id, title, original_id

id	title	original_id
version-0.21-timepickerandroid	timepickerandroid	timepickerandroid

TimePickerAndroid #

Edit on GitHub

Opens the standard Android time picker dialog.

Example #

try { const {action, hour, minute} = await TimePickerAndroid.open({ hour: 14, minute: 0, is24Hour: false, // Will display '2 PM' }); if (action !== DatePickerAndroid.dismissedAction) { // Selected hour (0-23), minute (0-59) } } catch ({code, message}) { console.warn('Cannot open time picker', message); }

Methods #

static open(options: Object) #

Opens the standard Android time picker dialog.

The available keys for the options object are: hour (0-23) - the hour to show, defaults to the current time minute (0-59) - the minute to show, defaults to the current time

• is24Hour (boolean) - If true, the picker uses the 24-hour format. If false, the picker shows an AM/PM chooser. If undefined, the default for the current locale is used.

  Returns a Promise which will be invoked an object containing action, hour (0-23), minute (0-59) if the user picked a time. If the user dismissed the dialog, the Promise will still be resolved with action being TimePickerAndroid.dismissedAction and all the other keys being undefined. Always check whether the action before reading the values.

static timeSetAction() #

A time has been selected.

static dismissedAction() #

The dialog has been dismissed.

Examples #

Edit on GitHub

'use strict';

var React = require('react-native'); var { TimePickerAndroid, StyleSheet, Text, TouchableWithoutFeedback, } = React;

var UIExplorerBlock = require('./UIExplorerBlock'); var UIExplorerPage = require('./UIExplorerPage');

var TimePickerAndroidExample = React.createClass({

statics: { title: 'TimePickerAndroid', description: 'Standard Android time picker dialog', },

getInitialState() { // *Text, *Hour and *Minute are set by successCallback -- this updates the text with the time // picked by the user and makes it so the next time they open it the hour and minute they picked // before is displayed. return { isoFormatText: 'pick a time (24-hour format)', presetHour: 4, presetMinute: 4, presetText: 'pick a time, default: 4:04AM', simpleText: 'pick a time', }; },

async showPicker(stateKey, options) { try { const {action, minute, hour} = await TimePickerAndroid.open(options); var newState = {}; if (action === TimePickerAndroid.timeSetAction) { newState[stateKey + 'Text'] = _formatTime(hour, minute); newState[stateKey + 'Hour'] = hour; newState[stateKey + 'Minute'] = minute; } else if (action === TimePickerAndroid.dismissedAction) { newState[stateKey + 'Text'] = 'dismissed'; } this.setState(newState); } catch ({code, message}) { console.warn(Error <span class="token keyword">in</span> example <span class="token string">'${stateKey}'</span><span class="token punctuation">:</span> , message); } },

render() { return ( <UIExplorerPage title="TimePickerAndroid"> <UIExplorerBlock title="Simple time picker"> <TouchableWithoutFeedback onPress={this.showPicker.bind(this, 'simple')}> <Text style={styles.text}>{this.state.simpleText}</Text> </TouchableWithoutFeedback> </UIExplorerBlock> <UIExplorerBlock title="Time picker with pre-set time"> <TouchableWithoutFeedback onPress={this.showPicker.bind(this, 'preset', { hour: this.state.presetHour, minute: this.state.presetMinute, })}> <Text style={styles.text}>{this.state.presetText}</Text> </TouchableWithoutFeedback> </UIExplorerBlock>

    &lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Time picker with 24-hour time format"</span><span class="token operator">&gt;</span>
      &lt;TouchableWithoutFeedback
        onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>showPicker<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token string">'isoFormat'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
          hour<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>isoFormatHour<span class="token punctuation">,</span>
          minute<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>isoFormatMinute<span class="token punctuation">,</span>
          is24Hour<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
        &lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>text<span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>isoFormatText<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
      &lt;<span class="token operator">/</span>TouchableWithoutFeedback<span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>
  &lt;<span class="token operator">/</span>UIExplorerPage<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

}, });

/**

• Returns e.g. '3:05'. */ function _formatTime(hour, minute) { return hour + ':' + (minute < 10 ? '0' + minute : minute); }

var styles = StyleSheet.create({ text: { color: 'black', }, });

module.exports = TimePickerAndroidExample;

Next →