react-native/website/_versioned_docs/version-0.42/timepickerandroid.md

id, original_id, title

id	original_id	title
version-0.42-timepickerandroid	timepickerandroid	timepickerandroid

TimePickerAndroid #

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 !== TimePickerAndroid.dismissedAction) { // Selected hour (0-23), minute (0-59) } } catch ({code, message}) { console.warn('Cannot open time picker', message); }

Methods #

static open(options) #

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.

You can edit the content above on GitHub and send us a pull request!

Examples #

Edit on GitHub

'use strict';

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

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

class TimePickerAndroidExample extends React.Component { static title = 'TimePickerAndroid'; static description = 'Standard Android time picker dialog';

state = { isoFormatText: 'pick a time (24-hour format)', presetHour: 4, presetMinute: 4, presetText: 'pick a time, default: 4:04AM', simpleText: 'pick a time', };

showPicker = async (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;

Run this example

×

Powered by appetize.io

← PrevNext →