React Native DateTime

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

中文说明

修改高版本RN集成的问题，修正IOS下不显示的问题

Installation

sh
npm install react-native-datetime-picker-universal --save


$3

* not need install, on ios use js write
$3

* In

android/settings.gradle

gradle
...
include ':react-native-datetime-picker-universal'
project(':react-native-datetime-picker-universal').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-datetime-picker-universal/android')

* In android/app/build.gradle

`gradle ... dependencies { ... compile project(':react-native-datetime-picker-universal') }`

* register module (in MainActivity.java)

On newer versions of React Native (0.18+):`java import com.keyee.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 RCTDateTimePickerPackage(), // <------ add here new MainReactPackage()); } }`

On older versions of React Native:`java import com.keyee.datetime.*; // <--- import

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler { ...... @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mReactRootView = new ReactRootView(this);

mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModuleName("index.android") .addPackage(new MainReactPackage()) .addPackage(new RCTDateTimePickerPackage()) // <------ add here .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build();

mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);

setContentView(mReactRootView); }

...... }`

`$3`


* ios


!image


* android


!image
Usage

use as follows:

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


* on ios, make sure  must on topest view
$3

js
'use strict';
var React = require('react-native');
var {
    StyleSheet,
    TouchableOpacity,
    View,
    Text,
} = React;
var DateTimePicker = require('react-native-datetime-picker-universal').default;
var Button = require('@remobile/react-native-simple-button');
module.exports = React.createClass({
    getInitialState() {
        return {
            date: new Date(),
        }
    },
    showDatePicker() {
        var date = this.state.date;
        this.picker.showDatePicker(date, (d)=>{
            this.setState({date:d});
        });
    },
    showTimePicker() {
        var date = this.state.date;
        this.picker.showTimePicker(date, (d)=>{
            this.setState({date:d});
        });
    },
    showDateTimePicker() {
        var date = this.state.date;
        this.picker.showDateTimePicker(date, (d)=>{
            this.setState({date:d});
        });
    },
    render() {
        return (
            
                
                    {this.state.date.toString()}
                
                
                
                
                
                
                
                {this.picker=picker}}/>
            
        );
    },
});

var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', paddingTop:20, }, });``

$3

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

$3

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