example.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from "react";
import {
  Platform,
  TouchableOpacity,
  StyleSheet,
  Text,
  Switch,
  Slider,
  View,
  Dimensions
} from "react-native";
import TimePicker from "./datePicker";
import dayjs from "dayjs";
let { width, height } = Dimensions.get("window");
export default class App extends Component {
  constructor(props) {
    super(props);
    let selectedDate = dayjs();
    this.state = {
      mode: "date",
      is24Hour: true,
      accentColor: "blue",
      minuteInterval: 5,
      disabled: false,
      okColor: "green",
      cancelColor: "red",
      darkTheme: false,
      showYearPickerFirst: false,
      enableSeconds: false,
      scrollOrientation: "horizontal",
      selectedDate
    };
    this._handleDatePicked = this._handleDatePicked.bind(this);
    this._hideDateTimePicker = this._hideDateTimePicker.bind(this);
  }
  renderDate(date) {
    let year = dayjs(date).format("YYYY");
    let month = dayjs(date).format("MMM");
    let day = dayjs(date).format("DD");
    return (
      <View style={styles.dateWrapper}>
        <View
          style={[
            styles.dateElementView,
            {
              marginRight: 10
            }
          ]}
        >
          <Text style={styles.dateElement}>{month}</Text>
        </View>
        <View
          style={[
            styles.dateElementView,
            {
              marginRight: 10
            }
          ]}
        >
          <Text style={styles.dateElement}>{day}</Text>
        </View>
        <View style={styles.dateElementView}>
          <Text style={styles.dateElement}>{year}</Text>
        </View>
      </View>
    );
  }
  _handleDatePicked(date) {
    console.log("selectedDate", date);
    this.setState({ selectedDate: date });
  }
  _hideDateTimePicker() {
    console.log("canceled");
  }
  getRandomColor() {
    var letters = "0123456789ABCDEF";
    var color = "#";
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }
  setAccentColor() {
    this.setState({ accentColor: this.getRandomColor() });
  }
  setOkColor() {
    this.setState({ okColor: this.getRandomColor() });
  }
  setCancelColor() {
    this.setState({ cancelColor: this.getRandomColor() });
  }
  render() {
    return (
      <View style={styles.container}>
        <TimePicker
          renderDate={date => this.renderDate(date)}
          accentColor={this.state.accentColor}
          okColor={this.state.okColor}
          cancelColor={this.state.cancelColor}
          okText={"OK"}
          cancelText={"CANCEL"}
          showYearPickerFirst={this.state.showYearPickerFirst}
          minuteInterval={this.state.minuteInterval}
          enableSeconds={this.state.enableSeconds}
          mode={this.state.mode}
          darkTheme={this.state.darkTheme}
          is24Hour={this.state.is24Hour}
          disabled={this.state.disabled}
          onConfirm={this._handleDatePicked}
          onCancel={this._hideDateTimePicker}
          date={this.state.selectedDate}
          placeholder={this.state.mode == "date" ? "YY/DD/MM" : "HH:MM"}
          title={`Navybits ${
            this.state.mode == "date" ? "Date Picker" : "Time Picker"
          }`}
          height={300}
          disabledTimes={[
            { hour: 22, minute: 10 },
            { hour: 13, minute: 20 }
            // { hour: 10, minute: 10, second: 20 }
          ]}
          minTime={new Date()}
          minDate={new Date()}
          scrollOrientation={this.state.scrollOrientation}
          ref="TimePicker"
        />
        <View style={styles.row}>
          <Text style={styles.switchText}>Not disabled</Text>
          <View style={styles.centerView}>
            <Switch
              onValueChange={val => {
                this.setState({ disabled: val });
              }}
              value={this.state.disabled}
            />
          </View>
          <Text style={styles.switchText}>Disabled</Text>
        </View>
        <View style={styles.row}>
          <Text style={styles.switchText}>Time</Text>
          <View style={styles.centerView}>
            <Switch
              onValueChange={val => {
                this.setState({ mode: val ? "date" : "time" });
              }}
              value={this.state.mode == "date" ? true : false}
            />
          </View>
          <Text style={styles.switchText}>Date</Text>
        </View>
        <View style={styles.row}>
          <Text style={styles.switchText}>light theme</Text>
          <View style={styles.centerView}>
            <Switch
              onValueChange={val => {
                this.setState({ darkTheme: val });
              }}
              value={this.state.darkTheme}
            />
          </View>
          <Text style={styles.switchText}>dark theme</Text>
        </View>
        {this.state.mode == "time" ? (
          <View style={styles.row}>
            <Text style={styles.switchText}>not is24Hour</Text>
            <View style={styles.centerView}>
              <Switch
                onValueChange={val => {
                  this.setState({ is24Hour: val });
                }}
                value={this.state.is24Hour}
              />
            </View>
            <Text style={styles.switchText}>is24Hour</Text>
          </View>
        ) : null}
        {Platform.OS == "android" && this.state.mode == "date" ? (
          <View style={styles.row}>
            <Text style={styles.switchText}>Vertical</Text>
            <View style={styles.centerView}>
              <Switch
                onValueChange={val => {
                  this.setState({
                    scrollOrientation: val ? "horizontal" : "vertical"
                  });
                }}
                value={
                  this.state.scrollOrientation == "horizontal" ? true : false
                }
              />
            </View>
            <Text style={styles.switchText}>Horizontal</Text>
          </View>
        ) : null}
        {Platform.OS == "android" && this.state.mode == "time" ? (
          <View style={styles.row}>
            <Text style={styles.switchText}>do not enableSeconds</Text>
            <View style={styles.centerView}>
              <Switch
                onValueChange={val => {
                  this.setState({
                    enableSeconds: val
                  });
                }}
                value={this.state.enableSeconds}
              />
            </View>
            <Text style={styles.switchText}>enableSeconds</Text>
          </View>
        ) : null}
        {Platform.OS == "android" && this.state.mode == "date" ? (
          <View style={styles.row}>
            <Text style={styles.switchText}>do not showYearPickerFirst</Text>
            <View style={styles.centerView}>
              <Switch
                onValueChange={val => {
                  this.setState({
                    showYearPickerFirst: val
                  });
                }}
                value={this.state.showYearPickerFirst}
              />
            </View>
            <Text style={styles.switchText}>showYearPickerFirst</Text>
          </View>
        ) : null}
        {this.state.mode == "time" ? (
          <View style={styles.row}>
            <Text style={styles.switchText}>{"Minute Interval"}</Text>
            <View style={styles.centerView}>
              <Slider
                style={{ width: 100 }}
                thumbTintColor={"green"}
                minimumValue={0}
                maximumValue={20}
                onValueChange={val => {
                  this.setState({
                    minuteInterval: val
                  });
                }}
                step={5}
                value={this.state.minuteInterval}
              />
            </View>
            <Text style={styles.switchText}>{this.state.minuteInterval}</Text>
          </View>
        ) : null}
        <TouchableOpacity
          style={styles.button}
          onPress={() => this.setAccentColor()}
        >
          <Text>Set Accent Color to random</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.button}
          onPress={() => this.setOkColor()}
        >
          <Text>Set Ok Color to random</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.button}
          onPress={() => this.setCancelColor()}
        >
          <Text>Set Cancel Color to random</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  },
  row: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    padding: 5,
    alignSelf: "stretch",
    margin: 5
  },
  button: {
    padding: 10,
    margin: 5,
    borderWidth: 1,
    backgroundColor: "lightgray"
  },
  switchText: {
    flex: 1,
    textAlign: "center"
  },
  centerView: {
    flex: 1,
    alignItems: "center"
  },
  dateElementView: {
    flex: 1,
    height: 50,
    alignItems: "flex-start",
    paddingLeft: 15,
    paddingRight: 15,
    justifyContent: "center",
    backgroundColor: "#f2f2f2",
    borderWidth: 1,
    borderColor: "lightgrey"
  },
  dateElement: {
    color: "navy"
  },
  dateWrapper: {
    flexDirection: "row",
    alignSelf: "stretch",
    alignItems: "center",
    width: width - 40,
    height: 50,
    justifyContent: "space-between"
  }
});