React Native DateTime

A datetime-picker for react-native support for android and ios(base on @remobile/react-native-datetime-picker)

Installation

npm install react-native-dateandtime --save

Installation (iOS)

• not need install, on ios use js write

Installation (Android)

• In android/settings.gradle

...
include ':react-native-dateandtime'
project(':react-native-dateandtime').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-dateandtime/android')

• In android/app/build.gradle

...
dependencies {
    ...
    compile project(':react-native-dateandtime')
}

• register module

import com.wrp.datetime.*; // <--- import

public class MainActivity extends ReactActivity { ......

/**

• A list of packages used by the app. If the app uses additional views
• or modules besides the default ones, add more packages here. */ @Override protected List getPackages() { return Arrays.asList( new DateTimePickerPackage(), // <------ add here new MainReactPackage()); } }

## Usage
use as follows:
```js
<DateTimePicker ref={(picker)=>{this.picker=picker}}/>
...
this.picker.showDatePicker(...)
this.picker.showTimePicker(...)
this.picker.showDateTimePicker(...)

• on ios, make sure must on topest view

###Example

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Button
} from 'react-native';
import DateTimePicker from 'react-native-dateandtime'
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  onButtonPress(){
    alert("点击了")
  }
  showTimePicker(){
    var startDate = new Date();
    this.picker1.showTimePicker(startDate, (d)=>{//d=>Date

    });
  }
  showDatePicker(){
    var startDate = new Date();
    this.picker2.showDatePicker(startDate, (d)=>{

    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text title="Press Me" style={styles.instructions}>
        </Text>
        <Button  title='button1' onPress={(data)=>{this.showTimePicker()}}/>
        <DateTimePicker
          theme="1"
          ref={(picker)=>{this.picker1=picker}}/>
        <Button  title="button2" onPress={(data)=>{this.showDatePicker()}}/>
        <DateTimePicker
          theme="3"
          ref={(picker)=>{this.picker2=picker}}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',

  },
  welcome: {
    fontSize: 20,

    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Methods

• showDatePicker(date, callback(date))
• showTimePicker(date, callback(date))
• showDateTimePicker(date, callback(date))