logisticinfotech / react-native-datetimepicker

React Native horizontal date picker

React Native horizontal date picker

Installation and Usage

Please check this blog for installation and usage this link

Basic Properties

Prop	Default	Type	Description
pickerType	datetime	enum of ["date","time","datetime"]	Type of the picker user want to display.
minDate	current date	Date	Minimum date from picker value start.
maxDate	3 months from current date	Date	Maximum date upto picker value display.
defaultSelected	null	Date	By default selected date and time.
isShowYear	true	bool	Dispay year above picker.
yearContainerStyle	null	style	Style of the year container.
datePickerContainerStyle	null	style	Style of the date picker.
timePickerContainer	null	style	Style of the time picker.
yearTextStyle	null	style	Style of the year display.
selectedTextStyle	null	style	Style of the selected date or time.
unSelectedTextStyle	null	style	Style of the non selected date or time.
datePickerBG	null	object or reference	Background image of date picker.
timePikerBG	null	object or reference	Background image of time picker.
dayFormat	Do	string	Format of date to display.
monthFormat	MMM	string	Format of month to display.
yearFormat	yyyy	string	Format of year to display.
timeFormat	HH:mm	string	Format of time to display.
timeStep	60	number	Amount of the time divide in minutes for time picker.
returnDateFormat	DD-MM-YYYY	string	Return formate of the date selected.
returnTimeFormat	hh:mm a	string	Return formate of the time selected.
returnDateTimeFormat	DD-MM-YYYY hh:mm a	string	Return formate of the full datetime selected.
onDateSelected	() => {}	function	Return date when date is selected.
onTimeSelected	() => {}	function	Return time when date is selected.
onDateTimeSelected	() => {}	function	Return object of date, time and datetime when date or time is selected.

react-native-datetimepicker's Issues

How to limit the time

Hi, is it possible to set minTime and maxTime in the current version? As of right now, it shows time from 00:00 to 23:00 and I want to limit it to 09:00 to 17:00.

minDate is not working

i am setting minDate but it doesnt work, and even in your example its not there can u help me out here. its throwing warning as Warning: Failed prop type: Invalid prop 'minDate' of type 'Object' supplied to 'HorizontalDatePicker'

I am getting the following warnings even though i am using the correct methods

here's the code i have written

export default class CustomDatePicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date1: '',
      time1: '',
      dateTime1: '',
      date2: '',
      time2: '',
      dateTime2: '',
      date3: '',
      time3: '',
      dateTime3: '',
    };
  }

  onDateSelected = date => {
    // setTimeout(()=>{}, 5000);
    this.setState({
      date1: date,
      date2: moment(date, 'DD-MM-YYYY').format('DD MMM YYYY'),
      date3: moment(date, 'DD-MM-YYYY').format('Do MMMM YYYY'),
    });
  };

  onTimeSelected = time => {
    this.setState({
      time1: time,
      time2: moment(time, 'hh:mm a').format('HH:mm'),
      time3: moment(time, 'hh:mm a').format('HH:mm a'),
    });
  };

  onDateTimeSelected = datetime => {
    // format="MMMM Do YYYY, h:mm:ss a"
    this.setState({
      dateTime1: datetime.datetime,
      dateTime2: moment(datetime.datetime, 'DD-MM-YYYY hh:mm a').format('DD MMM YYYY 

HH:mm'),
dateTime3: moment(datetime.datetime, 'DD-MM-YYYY hh:mm a').format('MMMM Do YYYY, h:mm:ss a'),
});
};
render() {
const { date1, date2, date3, time1, time2, time3, dateTime1, dateTime2, dateTime3 } =
this.state;
return (


<HorizontalDatePicker
datePickerContainerStyle={{backgroundColor: 'white'}}
timePickerContainerStyle={{backgroundColor: 'white'}}
yearContainerStyle={{backgroundColor: 'white'}}
yearTextStyle={{color: '#31588A', paddingLeft: 200}}
unSelectedTextStyle={[{color: '#31588A'}]}
selectedTextStyle={{color: '#EACF79'}}
onDateSelected={this.onDateSelected}
onTimeSelected={this.onTimeSelected}
onDateTimeSelected={this.onDateTimeSelected}
/>


<Text style={[styles.instructions, styles.textColor1]}>{date1}
<Text style={[styles.instructions, styles.textColor1]}>{time1}
<Text style={[styles.instructions, styles.textColor1]}>{dateTime1}


<Text style={[styles.instructions, styles.textColor2]}>{date2}
<Text style={[styles.instructions, styles.textColor2]}>{time2}
<Text style={[styles.instructions, styles.textColor2]}>{dateTime3}


<Text style={[styles.instructions, styles.textColor3]}>{date3}
<Text style={[styles.instructions, styles.textColor3]}>{time3}
<Text style={[styles.instructions, styles.textColor3]}>{dateTime3}



);
}
}

is there a way that i can select minutes too ?

I am able to select time using this param onTimeSelected={this.onTimeSelected}, is there any way that i can display the minutes in the multiples of 5 and select the minutes, i hope there is a way
Thanks.