Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
0
rated 0 times [  6] [ 6]  / answers: 1 / hits: 8098  / 5 Years ago, fri, august 23, 2019, 12:00:00

For example: today is August 23 at 4 pm.
I make to disabled dates until 22 (I used minDate = {moment ().toDate ()}). How to make disabled time in this case up to 16 (include)? That you cannot choose a date and time earlier than at the present.
I use the react-datepicker and moment libraries.



Code here: https://stackblitz.com/edit/react-msygf9



class App extends Component {
constructor() {
super();
this.state = {
selected: new Date()
};
}

handle = (date) => {
this.setState({
selectedDate: date
})
}

render() {
return (
<div>
<DatePicker
selected={this.state.selected}
onChange={this.handle}
showTimeSelect
timeFormat=HH:mm
timeIntervals={15}
dateFormat=MMMM d, yyyy h:mm aa
timeCaption=time
minDate={moment().toDate()}
/>
</div>
);
}
}

More From » reactjs

 Answers
5

https://stackblitz.com/edit/react-hogvhv?file=index.js


I have tested this and it works according to what you requested.


import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import moment from 'moment';


class App extends Component {
constructor() {
super();
this.state = {
selected: new Date(),
minTime: this.calculateMinTime(new Date())
};
}
calculateMinTime = date => {
let isToday = moment(date).isSame(moment(), 'day');
if (isToday) {
let nowAddOneHour = moment(new Date()).add({hours: 1}).toDate();
return nowAddOneHour;
}
return moment().startOf('day').toDate();
}

handle = (date) => {
this.setState({
selectedDate: date,
minTime: this.calculateMinTime(date)
})
}

render() {
return (
<div>
<DatePicker
selected={this.state.selected}
onChange={this.handle}
excludeOut
showTimeSelect
timeFormat="HH:mm"
timeIntervals={15}
dateFormat="MMMM d, yyyy h:mm aa"
timeCaption="time"
minDate={new Date()}
minTime={this.state.minTime}
maxTime={moment().endOf('day').toDate()}
/>
</div>
);
}
}

render(<App />, document.getElementById('root'));

[#6476] Wednesday, August 21, 2019, 5 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
shylaelisan

Total Points: 37
Total Questions: 94
Total Answers: 110

Location: Angola
Member since Tue, May 5, 2020
4 Years ago
;