@sorakrisc/react-native-datetimepicker NPM

React Native Datetime Picker

This is a library forked from https://github.com/nysamnang/react-native-24h-timepicker/issues the intention was to support buddhist year and modified min max date time.

I'll try my best to update this documentation.

Screenshot

screenshot

Installation

npm i @sorakrisc/react-native-datetimepicker --save
npm i @react-native-picker/picker

or

yarn add @sorakrisc/react-native-datetimepicker
yarn add @react-native-picker/picker

Usage

Date Picker

import {TimePicker, DatePicker, toBuddhistYear} from "react-native-24h-timepicker";
<DatePicker
          ref={ref => {
              this.DatePicker = ref;
          }}
          placeholder={'placeholder'}
          date={date}
          format={'DD/MM/YYYY'}
          inputComponent={<InputText
              pointerEvents="none"
              type={this.props.inputType}
              mt={26}
              label={Localized['question.answer']}
              maskOptions={this.props.inputMaskOptions}
              // value={toBuddhistYear(moment(this.state.date, 'DD/MM/YYYY'), 'DD MMM YYYY')}
              value={moment(this.state.date, 'DD/MM/YYYY')}
          />}
          minDate={moment().subtract(100, 'years')}
          maxDate={moment().add(100, 'years')}
          confirmBtnText={'confirm'}
          cancelBtnText={'cancel'}
          onConfirm={(date) => this.setDate(date)}
          // calendarType={'buddhist'}
          // monthList={[
          //     'มกราคม',
          //     'กุมภาพันธ์',
          //     'มีนาคม',
          //     'เมษายน',
          //     'พฤษภาคม',
          //     'มิถุนายน',
          //     'กรกฎาคม',
          //     'สิงหาคม',
          //     'กันยายน',
          //     'ตุลาคม',
          //     'พศจิกายน',
          //     'ธันวาคม'
          // ]}
      />

Time Picker

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 (
      <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

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