I have implemented the date-picker in my app. i used the react-native-munity/datetimepicker package for date-picker. But i have to add the custom option/methods ,by using that i can enable and disable the dates and also want to disable the previous dates. I am unable to implement it. Also the date time is not updating continuously. So please suggest any solution.

Code:

import React, {useState} from 'react';
import {View, Button, Platform} from 'react-native';
import DateTimePicker from '@react-native-munity/datetimepicker';

export const CustomDatePicker = () => {
  const [date, setDate] = useState(new Date());
  const [mode, setMode] = useState('date');
  const [show, setShow] = useState(false);

  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setShow(Platform.OS === 'ios');
    setDate(currentDate);
  };

  const showMode = (currentMode) => {
    setShow(true);
    setMode(currentMode);
  };

  const showDatepicker = () => {
    showMode('date');
  };


  return (
    <View>
      <View>
        <Button onPress={showDatepicker} title="Show date picker!" />
      </View>
    
      {show && (
        <DateTimePicker
          testID="dateTimePicker"
          value={date}
          mode={mode}
          is24Hour={true}
          display="default"
          onChange={onChange}
        />
      )}
    </View>
  );
};

I have implemented the date-picker in my app. i used the react-native-munity/datetimepicker package for date-picker. But i have to add the custom option/methods ,by using that i can enable and disable the dates and also want to disable the previous dates. I am unable to implement it. Also the date time is not updating continuously. So please suggest any solution.

Code:

import React, {useState} from 'react';
import {View, Button, Platform} from 'react-native';
import DateTimePicker from '@react-native-munity/datetimepicker';

export const CustomDatePicker = () => {
  const [date, setDate] = useState(new Date());
  const [mode, setMode] = useState('date');
  const [show, setShow] = useState(false);

  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setShow(Platform.OS === 'ios');
    setDate(currentDate);
  };

  const showMode = (currentMode) => {
    setShow(true);
    setMode(currentMode);
  };

  const showDatepicker = () => {
    showMode('date');
  };


  return (
    <View>
      <View>
        <Button onPress={showDatepicker} title="Show date picker!" />
      </View>
    
      {show && (
        <DateTimePicker
          testID="dateTimePicker"
          value={date}
          mode={mode}
          is24Hour={true}
          display="default"
          onChange={onChange}
        />
      )}
    </View>
  );
};

• javascript
• react-native
• datepicker

Share Improve this question Follow edited Jun 17, 2021 at 6:35 Manish Kumar 19233 bronze badges asked Jun 17, 2021 at 5:31 vjtechnovjtechno 48422 gold badges77 silver badges2222 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Refer react-native-munity/datetimepicker documentation

For minDate which determines the eldest date you can pick: https://www.npmjs./package/@react-native-munity/datetimepicker#minimumdate-optional

For maximumDate which determines the newest date you can pick: https://www.npmjs./package/@react-native-munity/datetimepicker#minimumdate-optional

<DateTimePicker
      testID="dateTimePicker"
      value={date}
      mode={mode}
      is24Hour={true}
      display="default"
      onChange={onChange}
      minimumDate={new Date(2020, 0, 1)}
      maximumDate={new Date(2022, 10, 20)} />

import React, { Component, useState } from 'react';
import { View, Button } from 'react-native';
import DateTimePicker from '@react-native-munity/datetimepicker';

const MyDatePicker = () => {
  

  const maxDate = new Date(); <-- get today date

  return (
    <View>
    
        <DateTimePicker
          testID="dateTimePicker"
          value={date}
          mode="date"
          is24Hour={true}
          display="default"
          maximumDate={maxDate} // set current date  
        />
     
    </View>
  );
};

export default MyDatePicker;