Opens the standard Android time picker dialog.
Example #
try {
const {action, hour, minute} = await TimePickerAndroid.open({
hour: 14,
minute: 0,
is24Hour: false, });
if (action !== TimePickerAndroid.dismissedAction) {
}
} 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.
'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');
var TimePickerAndroidExample = React.createClass({
statics: {
title: 'TimePickerAndroid',
description: 'Standard Android time picker dialog',
},
getInitialState() {
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 in example '${stateKey}': `, 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>
<UIExplorerBlock title="Time picker with 24-hour time format">
<TouchableWithoutFeedback
onPress={this.showPicker.bind(this, 'isoFormat', {
hour: this.state.isoFormatHour,
minute: this.state.isoFormatMinute,
is24Hour: true,
})}>
<Text style={styles.text}>{this.state.isoFormatText}</Text>
</TouchableWithoutFeedback>
</UIExplorerBlock>
</UIExplorerPage>
);
},
});
function _formatTime(hour, minute) {
return hour + ':' + (minute < 10 ? '0' + minute : minute);
}
var styles = StyleSheet.create({
text: {
color: 'black',
},
});
module.exports = TimePickerAndroidExample;