CODEWITHSUNDEEP
javascriptreact-nativedatepicker
vjtechno
vjtechno

Reputation: 484

how to enable and disable previous and future date on react-native-community/datetimepicker in React Native

I have implemented the date-picker in my app. i used the react-native-community/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-community/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>
  );
};

Upvotes: 1

Views: 8765

Answers (2)

ND verma
ND verma

Reputation: 287

import React, { Component, useState } from 'react';
import { View, Button } from 'react-native';
import DateTimePicker from '@react-native-community/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;

Upvotes: 0

p2pdops
p2pdops

Reputation: 515

Refer react-native-community/datetimepicker documentation

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

For maximumDate which determines the newest date you can pick: https://www.npmjs.com/package/@react-native-community/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)} />

Upvotes: 3

Related Questions