1.1.6 • Published 3 years ago

react-native-super-timepicker v1.1.6

Weekly downloads
4
License
MIT
Repository
github
Last release
3 years ago

react-native-super-timepicker

npm version npm downloads

Summary

A 24-hour format time picker which improves on react-native-24h-timepicker by:

  • supporting minHour and maxHour (contribution by mindmind)
  • removing deprecated stuff like componentWillReceiveProps
  • updated dependencies to the latest stuff

Screenshot

screenshot

Installation

npm i react-native-super-timepicker --save

or

yarn add react-native-super-timepicker

Example

import React, { Component } from "react";
import { StyleSheet, View, TouchableOpacity, Text } from "react-native";
import TimePicker from "react-native-super-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 (
      <View style={styles.container}>
        <Text style={styles.text}>REACT NATIVE</Text>
        <Text style={styles.text}>24 HOURS FORMAT TIMEPICKER</Text>
        <TouchableOpacity
          onPress={() => this.TimePicker.open()}
          style={styles.button}
        >
          <Text style={styles.buttonText}>TIMEPICKER</Text>
        </TouchableOpacity>
        <Text style={styles.text}>{this.state.time}</Text>
        <TimePicker
          ref={(ref) => {
            this.TimePicker = ref;
          }}
          onCancel={() => this.onCancel()}
          onConfirm={(hour, minute) => this.onConfirm(hour, minute)}
        />
      </View>
    );
  }
}

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

PropTypeDescriptionDefault
minHournumberMinimum of hour0
maxHournumberMaximum of hour23
minMinutenumberMinimum of minute0
maxMinutenumberMaximum of minute59
hourIntervalnumberThe interval at which hours can be selected.1
minuteIntervalnumberThe interval at which minutes can be selected.1
hourUnitstringAdd extra text to hour (e.g. "hrs"). Include a space if you want a gap between the number and the text (e.g. " hrs" for "18 hrs")""
hourUnitSingularstringThe first hour's extra text, if not hourUnit (e.g. "1 hr" vs "2 hrs")""
minuteUnitstringAdd extra text to minute (e.g. "mins"). Include a space if you want a gap between the number and the text (e.g. " mins" for "4 mins")""
minuteUnitSingularstringThe first minute's extra text, if not minuteUnit (e.g. "1 min" vs "2 mins")""
selectedHourstringDefault hour"0"
selectedMinutestringDefault minute"00"
itemStyleobjectItem text style{}
textCancelstringCancel button textCancel
textConfirmstringConfirm button textConfirm
onCancelfunctionEvent on Cancel button
onConfirmfunctionEvent on Confirm button

Methods

Method NameDescription
openOpen TimePicker
closeClose 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 file for details

Author

Made by Philip Su, with thanks to original author NYSamnang. Repo was forked to provide more active maintenance and to accept others' pull requests.