Git Product home page Git Product logo

Comments (5)

SL-A-SH avatar SL-A-SH commented on July 22, 2024 10

To block future dates initialize your DateTimePicker with maximumDate prop likes so:

<DateTimePicker
   isVisible={this.state.isDateTimePickerVisible}
   maximumDate={new Date()}
   onConfirm={this.handleDatePicked}
   onCancel={this.hideDateTimePicker}
/>

To block current date use maximumDate like so:

<DateTimePicker
   isVisible={this.state.isDateTimePickerVisible}
   onConfirm={this.handleDatePicked}
   maximumDate={new Date(Date.now() - 86400000)}
   onCancel={this.hideDateTimePicker}
/>

from react-native-modal-datetime-picker.

Husnac123 avatar Husnac123 commented on July 22, 2024 1

To block future dates initialize your DateTimePicker with maximumDate prop likes so:


<DateTimePicker

   isVisible={this.state.isDateTimePickerVisible}

   maximumDate={new Date()}

   onConfirm={this.handleDatePicked}

   onCancel={this.hideDateTimePicker}

/>

To block current date use maximumDate like so:


<DateTimePicker

   isVisible={this.state.isDateTimePickerVisible}

   onConfirm={this.handleDatePicked}

   maximumDate={new Date(Date.now() - 86400000)}

   onCancel={this.hideDateTimePicker}

/>

Is it done in Html?

from react-native-modal-datetime-picker.

mmazzarolo avatar mmazzarolo commented on July 22, 2024

Hey @lavarajallu, sorry for answering so late. Are you still having the issue?
I'm on vacation right now, I'll take a look at it when I'll be back.

from react-native-modal-datetime-picker.

khairunnisaa avatar khairunnisaa commented on July 22, 2024

how can you resolve this issue?

from react-native-modal-datetime-picker.

xerosource01 avatar xerosource01 commented on July 22, 2024

To disable future dates in a ReactJS component, you can use JavaScript's Date object and compare the selected date with the current date. If the selected date is in the future, you can prevent the change and display an error message, or simply ignore the change.

Here is an example of how to disable future dates in a date picker component:

 import React, { useState } from 'react';
    
    const DatePicker = () => {
      const [selectedDate, setSelectedDate] = useState(new Date());
      const handleDateChange = (date) => {
        const currentDate = new Date();
        if (date > currentDate) {
          alert("Cannot select a future date");
        } else {
          setSelectedDate(date);
        }
      };
    
      return (
        <input
          type="date"
          value={selectedDate.toISOString().substr(0, 10)}
          onChange={(event) => handleDateChange(new Date(event.target.value))}
        />
      );
    };
    
    export default DatePicker;

Another way to achieve the same result is to use the max attribute of the input element. You can set the max attribute to the current date, which will prevent the user from selecting any future dates. Here's an example:

import React, { useState } from 'react';
    
    const DatePicker = () => {
      const [selectedDate, setSelectedDate] = useState(new Date());
    
      const handleDateChange = (event) => {
        setSelectedDate(new Date(event.target.value));
      };
    
      return (
        <input
          type="date"
          value={selectedDate.toISOString().substr(0, 10)}
          onChange={handleDateChange}
          max={new Date().toISOString().substr(0, 10)}
        />
      );
    };
    
    export default DatePicker;

You can also add a custom validation method to validate the selected date before setting it as the selectedDate state. You can add an error message to be displayed when the selected date is in the future, for example. Here's an example:

import React, { useState } from 'react';
    
     const DatePicker = () => {
      const [selectedDate, setSelectedDate] = useState(new Date());
      const [error, setError] = useState(null);
    
      const handleDateChange = (event) => {
        const selected = new Date(event.target.value);
        const currentDate = new Date();
        if (selected > currentDate) {
          setError("Cannot select a future date");
        } else {
          setSelectedDate(selected);
          setError(null);
        }
      };
    
      return (
        <>
          <input
            type="date"
            value={selectedDate.toISOString().substr(0, 10)}
            onChange={handleDateChange}
          />
          {error && <p style={{ color: "red" }}>{error}</p>}
        </>
      );
    };
    
    export default DatePicker;

This will allow you to validate the selected date and provide feedback to the user if the selected date is in the future.

Source..

How Can I disable Current Dates ReactJs

To disable the current date in a ReactJS component, you can use JavaScript's Date object and compare the selected date with the current date. If the selected date is the current date, you can prevent the change and display an error message, or simply ignore the change.

Here is an example of how to disable the current date in a date picker component:

import React, { useState } from 'react';

const DatePicker = () => {
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [error, setError] = useState(null);

  const handleDateChange = (event) => {
    const selected = new Date(event.target.value);
    const currentDate = new Date();
    if (selected.getTime() === currentDate.getTime()) {
      setError("Cannot select the current date");
    } else {
      setSelectedDate(selected);
      setError(null);
    }
  };

  return (
    <>
      <input
        type="date"
        value={selectedDate.toISOString().substr(0, 10)}
        onChange={handleDateChange}
      />
      {error && <p style={{ color: "red" }}>{error}</p>}
    </>
  );
};

export default DatePicker;

This will allow you to validate the selected date and provide feedback to the user if the selected date is the current date.

from react-native-modal-datetime-picker.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.