https://github.com/nysamnang/react-native-24h-timepicker
React Native 24 hours format TimePicker for iOS
https://github.com/nysamnang/react-native-24h-timepicker
24-hour-format number-picker-ios react-native time-picker-ios twenty-four-hour-format
Last synced: 12 months ago
JSON representation
React Native 24 hours format TimePicker for iOS
- Host: GitHub
- URL: https://github.com/nysamnang/react-native-24h-timepicker
- Owner: nysamnang
- License: mit
- Created: 2019-01-16T04:24:32.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T01:02:46.000Z (over 3 years ago)
- Last Synced: 2025-06-25T01:15:55.006Z (about 1 year ago)
- Topics: 24-hour-format, number-picker-ios, react-native, time-picker-ios, twenty-four-hour-format
- Language: JavaScript
- Size: 6.84 KB
- Stars: 30
- Watchers: 0
- Forks: 30
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-24h-timepicker
[](//npmjs.com/package/react-native-24h-timepicker) [
](//npmjs.com/package/react-native-24h-timepicker)
### Screenshot
## Installation
```
npm i react-native-24h-timepicker --save
```
### or
```
yarn add react-native-24h-timepicker
```
## Example
```jsx
import React, { Component } from "react";
import { StyleSheet, View, TouchableOpacity, Text } from "react-native";
import TimePicker from "react-native-24h-timepicker";
class Example extends Component {
constructor() {
super();
this.state = {
time: ""
};
}
onCancel() {
this.TimePicker.close();
}
onConfirm(hour, minute) {
this.setState({ time: `${hour}:${minute}` });
this.TimePicker.close();
}
render() {
return (
REACT NATIVE
24 HOURS FORMAT TIMEPICKER
this.TimePicker.open()}
style={styles.button}
>
TIMEPICKER
{this.state.time}
{
this.TimePicker = ref;
}}
onCancel={() => this.onCancel()}
onConfirm={(hour, minute) => this.onConfirm(hour, minute)}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
backgroundColor: "#fff",
paddingTop: 100
},
text: {
fontSize: 20,
marginTop: 10
},
button: {
backgroundColor: "#4EB151",
paddingVertical: 11,
paddingHorizontal: 17,
borderRadius: 3,
marginVertical: 50
},
buttonText: {
color: "#FFFFFF",
fontSize: 16,
fontWeight: "600"
}
});
export default Example;
```
## Props
| Prop | Type | Description | Default |
| -------------- | -------- | ---------------------------------------------- | ------- |
| maxHour | number | Maximum of hour | 23 |
| maxMinute | number | Maximum of minute | 59 |
| hourInterval | number | The interval at which hours can be selected. | 1 |
| minuteInterval | number | The interval at which minutes can be selected. | 1 |
| hourUnit | string | Add extra text to hour | "" |
| minuteUnit | string | Add extra text to minute | "" |
| selectedHour | string | Default hour | "0" |
| selectedMinute | string | Default minute | "00" |
| itemStyle | object | Item text style | {} |
| textCancel | string | Cancel button text | Cancel |
| textConfirm | string | Confirm button text | Confirm |
| onCancel | function | Event on Cancel button | |
| onConfirm | function | Event on Confirm button | |
## Methods
| Method Name | Description |
| ----------- | ---------------- |
| open | Open TimePicker |
| close | Close TimePicker |
### Note
Always set `ref` to `TimePicker` and call each method by using `this.TimePicker.methodName()` like example above.
## License
This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/NYSamnang/react-native-24h-timepicker/blob/master/LICENSE) file for details
## Author
Made with ❤️ by [NY Samnang](https://github.com/NYSamnang).