0.0.4 • Published 7 years ago

react-native-androidcustom-datetimepicker v0.0.4

Weekly downloads
6
License
ISC
Repository
github
Last release
7 years ago

React Native Android DateTime Picker Same As IOS

A react-native component for show the Date and time picker same as IOS in react-native android

Installation

  npm install react-native-androidcustom-datetimepicker --save
  react-native link react-native-androidcustom-datetimepicker

android

Manual installation

Setting.gradle

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

build.gradle

 + compile project(':react-native-androidcustom-datetimepicker')

MainApplication.java

 new DateTimePickerPackage()

Usage

import DateTimePickerModule from 'react-native-androidcustom-datetimepicker'

DatePicker

        DateTimePickerModule.openDatePicker({
          textConfirm:"Ok", // text for confirm button deafult is "Confirm"
          textCancel:"No", // text for cancel button deafult is "Cancel"
          btnTextSize:16, // button text size
          colorCancel:"#29436d", // button cancel text color
          colorConfirm:"#29436d", // button confirm text color 
          minYear:1970, // minimum year want to show
          maxYear:2018, // maximum year want to show 
          selectDate:"2015-06-22" //yyyy-MM-dd formate 
      }).then(function(result) {
        alert(result.date)// "result":{"year":2015,"month":03,"day":23,"date":"2015-03-23"} in success after select on confirm button
      });
  

TimePicker

    DateTimePickerModule.openTimePicker({
      textConfirm:"Ok", // text for confirm button deafult is "Confirm"
      textCancel:"No", // text for cancel button deafult is "Cancel"
      btnTextSize:16, // button text size
      colorCancel:"#29436d", // button cancel text color
      colorConfirm:"#29436d", // button confirm text color 
    }).then(function(result) {
      alert(result.time)// "result":{"hour":01,"minute":56,"AM_PM":"AM","time":"01:56 AM"} in success after select on confirm button
    });
  

Props for DatePicker

PropTypeDefaultDescription
colorConfirmString#303F9FConfirm button text color
colorCancelString#999999Cancel button text color
textConfirmStringConfirmConfirm text string
textCancelStringCancelCancel text string
btnTextSizeint16Button text size
minYearint1900minimum year to show in calender
maxYearintcurrent yearMaximum year to show in calender
selectDateStringcurrent dateselected date to show on topfront

Props for TimePicker

PropTypeDefaultDescription
colorConfirmString#303F9FConfirm button text color
colorCancelString#999999Cancel button text color
textConfirmStringConfirmConfirm text string
textCancelStringCancelCancel text string
btnTextSizeint16Button text size