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-datetime --save

Installation (iOS)

• not need install, on ios use js write

Installation (Android)

• In android/settings.gradle

...
include ':react-native-datetime'
project(':react-native-datetime').projectDir =newFile(rootProject.projectDir, '../node_modules/react-native-datetime/android')

• In android/app/build.gradle

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

• register module (in MainActivity.java)

On newer versions of React Native (0.18+):

importcom.keyee.datetime.*; // <--- importpublicclassMainActivityextendsReactActivity {
......
/** * A list of packages used by the app. If the app uses additional views * or modules besides the default ones, add more packages here. */@OverrideprotectedList<ReactPackage> getPackages() {
returnArrays.<ReactPackage>asList(
newRCTDateTimePickerPackage(this), // <------ add herenewMainReactPackage());
}
}

On older versions of React Native:

importcom.keyee.datetime.*; // <--- importpublicclassMainActivityextendsActivityimplementsDefaultHardwareBackBtnHandler {
......
@OverrideprotectedvoidonCreate(BundlesavedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = newReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(newMainReactPackage())
.addPackage(newRCTDateTimePickerPackage(this)) // <------ add here
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);
setContentView(mReactRootView);
}
......
}

Screencasts

• ios

* android

Usage

use as follows:

<DateTimePickerref={(picker)=>{this.picker=picker}}/>...this.picker.showDatePicker(...)this.picker.showTimePicker(...)this.picker.showDateTimePicker(...)

• on ios, make sure must on topest view

Example

'use strict';varReact=require('react-native');var{
StyleSheet,
TouchableOpacity,
View,
Text,}=React;varDateTimePicker=require('react-native-datetime').default;varButton=require('@remobile/react-native-simple-button');module.exports=React.createClass({getInitialState(){return{date: newDate(),}},showDatePicker(){vardate=this.state.date;this.picker.showDatePicker(date,(d)=>{this.setState({date:d});});},showTimePicker(){vardate=this.state.date;this.picker.showTimePicker(date,(d)=>{this.setState({date:d});});},showDateTimePicker(){vardate=this.state.date;this.picker.showDateTimePicker(date,(d)=>{this.setState({date:d});});},render(){return(<Viewstyle={styles.container}><Textstyle={{textAlign: 'center'}}>{this.state.date.toString()}</Text><Viewstyle={{height:40}}/><ButtononPress={this.showDatePicker}>showDatePicker</Button><Viewstyle={{height:40}}/><ButtononPress={this.showTimePicker}>showTimePicker</Button><Viewstyle={{height:40}}/><ButtononPress={this.showDateTimePicker}>showDateTimePicker</Button><DateTimePickerref={(picker)=>{this.picker=picker}}/></View>);},});varstyles=StyleSheet.create({container: {flex: 1,justifyContent: 'center',paddingTop:20,},});

Methods

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

Props

• cancelText (default: Cancel)
• okText (default: Ok)