Comments (5)
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.
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.
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.
how can you resolve this issue?
from react-native-modal-datetime-picker.
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.
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)
- iOS keyboard input for mode="time" breaks the UI HOT 3
- Native module RNDatePicker tried to override RNDatePicker
- Customizing Background and Text Color in Android with Expo HOT 2
- Minimum and maximum time is not working on android but working for ios
- MinuteInterval time return current time in ios , android working fine
- `onHide` callback doesn't return a valid Date
- timeZoneOffsetInMinutes` is deprecated and will be removed in a future release. Use `timeZoneName` instead.
- Datepicker is not visible on iOS HOT 1
- Can't see the text in the picker modal (iOS) HOT 1
- Missing peerDependency on React
- how can only use it as only Month and year picker
- react-native-modal-datetime-picker(^17.1.0) is not showing on iOS 17.3.1 HOT 1
- Exception in HostFunction: Malformed calls from JS: field sizes are different.
- Can't install in react-native 0.74 using NPM I HOT 1
- Dark Mode is not working on Android devices.
- Time Zone Issue HOT 1
- WARN: `defaultProps` will be removed from memo components HOT 3
- isDarkModeEnabled doesn't work on spinner in iOS
- how to add a custom header in Android
- WARN: defaultProps will be removed from memo components
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-modal-datetime-picker.