How to use handleChange with Multi date picker in react native?

Question

I am working on a project in React-Native and i have to use multiple date and multiple time pickers but i am unable to handle its handleChange function with multi date pickers/time pickers( using react-native-modal-datetime-picker).Could you please let me know how to get this done? Thanks in Advance!!

importing multiple times on different views:

//handleConfirm function
handleDateConfirm = (date) => {
console.log("date 1",date)
console.log("date 2",date)
console.log("date 3",date)
    this.setState({
      selectedDate: moment(date).format('MM/DD/YYYY'),
      isDatePickerVisible: false
    })
  }
View-1
<CalenderPicker isDateVisible={isDatePickerVisible} mode={'date'} minimumDate={moment(new Date()).add(1, 'h')} maximumDate={moment(new Date()).add(15, 'd').toDate()} handleDateConfirm={this.handleDateConfirm} onCancel={this.onCancel} />

View-2
<CalenderPicker isDateVisible={isDatePickerVisible} mode={'date'} minimumDate={moment(new Date()).add(1, 'h')} maximumDate={moment(new Date()).add(30, 'd').toDate()} handleDateConfirm={this.handleDateConfirm} onCancel={this.onCancel} />

View-3
<CalenderPicker isDateVisible={isDatePickerVisible} mode={'date'} minimumDate={moment(new Date()).add(1, 'h')} maximumDate={moment(new Date()).add(30, 'd').toDate()} handleDateConfirm={this.handleDateConfirm} onCancel={this.onCancel} />

//Common-Component
const CalenderPicker = ({ mode, isDateVisible,minimumDate,maximumDate,  handleDateConfirm, onCancel }) => { 
    return (
        <DateTimePickerModal
            mode={mode}
            isVisible={isDateVisible}
            minimumDate={minimumDate}
            maximumDate={maximumDate}
            display="default"
            onConfirm={handleDateConfirm}
            onCancel={onCancel}
        />
    )
}

i am unable to handle one handleConfirm function for multiple datepickers. like in react js we use name attribute to differentiate multi datepickers for its handleConfirm. How to handle that thing in react-native? — Navdeep Garg

Kartikey Kartikey · Accepted Answer · 2021-05-07T06:24:17

You can do something like this

Working Example

import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import Constants from 'expo-constants';
import moment from 'moment';

import CalenderPicker from './components/CalendarPicker';

// An Array of Initial values
const Init = [
  {
    id: 1,
    value: '',
    visible: false,
  },
  {
    id: 2,
    value: '',
    visible: false,
  },
  {
    id: 3,
    value: '',
    visible: false,
  },
];

export default function App() {
  const [isDateVisible, setIsDateVisible] = React.useState(false);
  const [Data, SetData] = React.useState(Init);
  let initial = new Date(Date.now() + 3600 * 1000 * 25);

  // handles DateConfirmation
  const handleDateConfirm = (data, index) => {
    let temp = [...Data];
    temp[index].value = moment(data).format('MM/DD/YYYY');
    temp[index].visible = false;
    SetData(temp);
  };

  // Executed onCancel
  const onCancel = (index) => {
    let temp = [...Data];
    temp[index].visible = false;
    SetData(temp);
  };

  // Executed when user opens a modal
  const onOpen = (index) => {
    try {
      let temp = [...Data];
      temp[index].visible = true;
      SetData(temp);
    } catch (error) {}
  };

  return (
    <View style={styles.container}>
      <CalenderPicker
        isDateVisible={Data[0].visible}
        mode={'date'}
        handleDateConfirm={(data) => handleDateConfirm(data, 0)}
        onCancel={() => onCancel(0)}
      />
      <Button title="Pick 1st Date Time" onPress={() => onOpen(0)} />
      <Text>1st Date Time - {Data[0].value}</Text>

      <CalenderPicker
        isDateVisible={Data[1].visible}
        mode={'date'}
        handleDateConfirm={(data) => handleDateConfirm(data, 1)}
        onCancel={() => onCancel(1)}
      />
      <Button title="Pick 2nd Date Time" onPress={() => onOpen(1)} />
      <Text>2nd Date Time - {Data[1].value}</Text>

      <CalenderPicker
        isDateVisible={Data[2].visible}
        mode={'date'}
        handleDateConfirm={(data) => handleDateConfirm(data, 2)}
        onCancel={() => onCancel(2)}
      />
      <Button title="Pick 3rd Date Time" onPress={() => onOpen(2)} />
      <Text>3rd Date Time - {Data[2].value}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

And your CalendarPicker.js

import React from 'react';
import DateTimePickerModal from 'react-native-modal-datetime-picker';

const CalenderPicker = ({
  mode,
  isDateVisible,
  minimumDate,
  maximumDate,
  handleDateConfirm,
  onCancel,
}) => {
  return (
    <DateTimePickerModal
      mode={mode}
      isVisible={isDateVisible}
      minimumDate={minimumDate}
      maximumDate={maximumDate}
      display="default"
      onConfirm={handleDateConfirm}
      onCancel={onCancel}
    />
  );
};

export default CalenderPicker;

How to use handleChange with Multi date picker in react native?

1 Answers