react-native-navybits-date-time-picker

This project is a modified version of react-native-datePicker. It solves the need to set a MinuteInterval on android using the native picker MaterialDateTimePicker

Getting started

$ npm install react-native-navybits-date-time-picker --save

Manual installation

iOS

you don't need to do anything

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.reactlibrary.RNNavybitsDateTimePickerPackage; to the imports at the top of the file
• Add new RNNavybitsDateTimePickerPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':react-native-navybits-date-time-picker'
   project(':react-native-navybits-date-time-picker').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-navybits-date-time-picker/android')
   

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':react-native-navybits-date-time-picker')
   

Example

Please refer to example.js

Properties

Prop	Default	Type	Description
style	-	object	Specify the style of the DatePicker button, eg. width, height...
date	-	string | date | Moment instance	Specify the display date of DatePicker. string type value must match the specified format
mode	'date'	enum	The enum of date and time for android and ios, , datetime for ios only
format	'YYYY-MM-DD'	string	Specify the display format of the date, which using moment.js. The default value change according to the mode.
okText	'ok'	string	Specify the confirm text
cancelText	'cancel'	string	Specify cancel text
minDate	-	string | date	Restricts the range of possible date values.
maxDate	-	string | date	Restricts the range of possible date values.
minTime	-	string | date	Restricts the range of possible date values.
maxTime	-	string | date	Restricts the range of possible date values.
duration	300	number	Specify the animation duration of datepicker on ios.
hourInterval	1	number	Controls hours interval on android time picker.
minuteInterval	10	number	Controls minutes interval on time picker.(ios and android)
secondInterval	10	number	Controls seconds interval on android time picker.
okColor	'green'	string	Controls ok Text color.
cancelColor	'red'	string	Controls cancel Text color.
accentColor	'blue'	string	Controls date/Time header color.
darkTheme	false	boolean	Controls date/Time body color.(light or dark)
vibrate	false	boolean	Set whether the dialogs should vibrate the device when a selection is made. (android only)
dismissOnPause	false	boolean	Set whether the picker dismisses itself when the parent Activity is paused or whether it recreates itself when the Activity is resumed.(android only)
enableSeconds	false	boolean	Allows you to enable or disable a seconds and minutes picker on the TimepickerDialog. Enabling the seconds picker, implies enabling the minutes picker. Disabling the minute picker will disable the seconds picker. The last applied setting will be used. By default enableSeconds = false and enableMinutes = true..(android only)
enableMinutes	true	boolean	Allows you to enable or disable a minutes on the TimepickerDialog. (android only)
showYearPickerFirst	false	boolean	Show the year picker first, rather than the month and day picker.. (android only)
scrollOrientation	'horizontal'	string	Determines whether months scroll Horizontal or Vertical. Defaults to Horizontal for the v2 layout and Vertical for the v1 layout (android only)
disabledTimes	-	array	You can pass in an array of objects, each object contains hour limiter minute and or seconds limiter. These values will not be available for selection. (android only)
customStyles	-	object	The hook of customize datepicker style, same as the native style. dateTouchBody, dateInput...
hideText	false	boolean	hides the displayed date/Time
disabled	false	boolean	Disable date/Time picker button
is24Hour	-	boolean	Set the TimePicker is24Hour flag. The default value depend on format.
allowFontScaling	true	boolean	Set to false to disable font scaling for every text component.
placeholder	''	string	The placeholder show when this.props.date is falsy
onDateChange	-	function	This is called when the user confirm the picked date or time in the UI. The first and only argument is a date or time string representing the new date and time formatted by moment.js with the given format property.
onOpenModal	-	function	This is called when the DatePicker Modal opens. (ios only)
onCloseModal	-	function	This is called when the DatePicker Modal closes. (ios only)
onPressMask	-	function	This is called when clicking the ios modal mask. (ios only)
TouchableComponent	TouchableHighlight	Component	Replace the TouchableHighlight with a custom Component. For example : TouchableOpacity
getDateStr	-	Function	A function to override how to format the date into a String for display, receives a Date instance

Property customStyles available keys

• appearance: dateInput, disabled, dateTouchBody, placeholderText, dateText
• ios select panel: datePickerCon, datePicker, btnConfirm, btnTextConfirm, btnCancel, btnTextCancel

Instance Methods

Method	Params	Description
onConfirm	-	Manually open the date picker panel
onCancel	-	Manually close the date picker panel like, similarly pressing cancel btn

Usage

1import TimePicker from "react-native-navybits-date-time-picker";
2
3 <TimePicker
4          accentColor={this.state.accentColor}
5          okColor={this.state.okColor}
6          cancelColor={this.state.cancelColor}
7          okText={"OK"}
8          cancelText={"CANCEL"}
9          mode={this.state.mode}
10          is24Hour={this.state.is24Hour}
11          disabled={this.state.disabled}
12          onConfirm={this._handleDatePicked}
13          onCancel={this._hideDateTimePicker}
14          date={this.state.selectedDate}
15          ref="TimePicker"
16        />