Как отключить будущие даты в reactjs?
Я не использую datepicker, но код работает нормально. На данный момент я выбрал тип ввода, и все работает нормально. Теперь я хочу отключить будущие даты. Как мне это сделать?
<div className = "form-group col-md-6">
<label for = "inputDate4">Date of Birth</label>
<input type = "date" className = "form-control" id = "inputDate4" placeholder = "Date of Birth" name = "dob" onChange = {this.handleChangeEvent} />
</div>
Редактировать: Проблема решить другим способом
Я использовал React Date Picker
Это так легко реализовать. Просто установите пакет npm
npm install react-datepicker --save
Установить момент также
npm install moment --save
Импортировать библиотеки
import DatePicker from 'react-datepicker';
import moment from 'moment';
import 'react-datepicker/dist/react-datepicker.css';
В конструкторе
this.state = {
dob: moment()
};
this.dateChange = this.dateChange.bind(this);
функция dateChange
dateChange(date) {
this.setState({
dob: date
});
}
И, наконец, функция рендеринга
<DatePicker
selected = {this.state.dob}
onChange = {this.dateChange}
className = "form-control"
placeholder = "Date of Birth"
maxDate = {new Date()}
/>
Здесь функция maxDate используется для отключения будущих дат.
maxDate = {new Date()}
Источник: https://www.npmjs.com/package/react-datepicker
Спасибо!
Ответы 5
Вы можете использовать атрибут min, max, чтобы ограничить выбор даты в пределах диапазона дат.
<div className = "form-group col-md-6">
<label for = "inputDate4">Date of Birth</label>
<input type = "date" className = "form-control" id = "inputDate4" placeholder = "Date of Birth" name = "dob" onChange = {this.handleChangeEvent} max = {moment().format("YYYY-MM-DD")}/>
</div>
Идеально! Это так просто. Большое спасибо.
Рад, что помог
var input = new Date ("inputgotBackfromthe user")
var now = new Date();
if (before < now) {
// selected date is in the past
}
Вам нужно попробовать преобразовать ввод в объект даты, после чего вы можете создать новый объект даты и проверить, что объект даты ввода старше или нет. Помните, что это будет большой объем, потому что пользователи должны вводить его в правильном формате. В противном случае вы можете получить исключение или неправильный объект даты.
Спасибо, работает. Я также нашел другой способ, вместо использования простого поля ввода я использовал response-datepicker
вы можете использовать библиотеку moment.js для работы с датой.
Теперь для проверки будущей даты вы можете использовать функцию diffmoment.js.
// today < future (31/01/2014)
today.diff(future) // today - future < 0
future.diff(today) // future - today > 0
Следовательно, вы должны обеспечить регресс ваше состояние. Если вы хотите убедиться, что все в порядке, вы можете добавить к функции дополнительный параметр:
moment().diff(SpecialTo, 'days') // -8 (days)
Примечание:
это не сработает, если сейчас другой день, но разница меньше 24 часов
Я проверяю выбранную дату, сравнивая ее с текущей датой или точно с моментом (), который дает нам значение текущего времени, прошедшего в секундах с некоторой даты в 1970 году. Это не позволит выбрать какие-либо будущие даты.
handleDateChange(date){
if (date <= moment()){
this.setState({
testDate: date
});
}
}
<DatePicker className = "form-control" dateFormat = "DD/MM/YYYY" id = "testDate onChange = {this.handleDateChange.bind(this)} onSelect = {this.handleSelect} selected = {this.state.testDate}/>
MaxDate сделал всю работу за меня. Попробуйте также использовать minDate для выбора минимальной даты.
import moment from 'moment';
import DatePicker from 'react-datepicker';
<DatePicker maxDate = {moment().toDate()} />
Возможный дубликат Установить максимальную дату в поле ввода даты на сегодняшний день