Skip to content
This repository has been archived by the owner on Apr 10, 2019. It is now read-only.

nucleartux/react-native-date

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

react-native-date

React Native date and time pickers for Android

Installation and How to use

Step 1 - NPM Install

npm install --save react-native-date

Step 2 - Update Gradle Settings

// file: android/settings.gradle
...

include ':reactdate', ':app'
project(':reactdate').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-date')

Step 3 - Update app Gradle Build

// file: android/app/build.gradle
...

dependencies {
    ...
    compile project(':reactdate')
}

Step 4 - Register React Package

// file: android/app/source/main/java/com/{projectName}.MainActivity.java
...
import me.nucleartux.date.ReactDatePackage; // import

public class MainActivity extends ReactActivity {
...
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MainReactPackage()
      , new ReactDatePackage() // register react date package here
      );
    }

...

Step 5 - Require and use in Javascript

// file: index.android.js

import React, { AppRegistry, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import DateAndroid from 'react-native-date';

const AwesomeProject = React.createClass({
  handleTimeClick: function () {
    DateAndroid.showTimepicker(function() {}, function(hour, minute) {
      console.log(`${hour}:${minute+1}`);
    });
  },
  handleDateClick: function () {
    DateAndroid.showDatepicker(function() {}, function(year, month, day) {
      console.log(`${year}/${month+1}/${day}`);
    });
  },
  render: function() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.handleDateClick}>
          <Text style={styles.instructions}>
            Click me to select Date
          </Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.handleTimeClick}>
          <Text style={styles.instructions}>
            Click me to select Time
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
});

const styles = StyleSheet.create({
  instructions: {
    textAlign: 'center',
    color: '#333333',
    margin: 5,
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

Notes

  • Please report any issues or send patches to get fixes in

About

React Native date and time pickers for Android

Resources

License

Stars

Watchers

Forks

Packages

No packages published