logisticinfotech / react-native-datetimepicker Goto Github PK

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.

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'

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.

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}



);
}
}