javascript - 如何在反应日期选择器中禁用日期和时间?
问题描述
例如:今天是 8 月 23 日下午 4 点。我将禁用日期设置为 22 (我使用过minDate = {moment ().toDate ()}
)。在这种情况下如何使禁用时间达到 16(包括)?您不能选择比现在更早的日期和时间。我使用react-datepicker
和moment
库。
此处代码: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>
);
}
}
解决方案
https://stackblitz.com/edit/react-hogvhv?file=index.js
我已经对此进行了测试,它可以根据您的要求工作。
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'));
推荐阅读
- gatsby - 使用 gatsby-source-contentful 访问您的内容空间失败
- python - 使用 Beautifulsoup 进行网页抓取:找不到类
- python - 如何从python中的文本文件中列出学生姓名
- c# - 返回 ViewModel 在返回实体列表的 EF 查询中工作正常,但在返回单个实体时却不行
- cookies - 存在 Set-cookie 标头但未设置 cookie,没有 HttpOnly
- javascript - 将自定义 Java MD5 解析为 JS
- html - 为什么我和我之间有一个灰色的“条”
- google-apps-script - 如果内部发送的电子邮件未按预期工作,则自动标记电子邮件的脚本
- sql - 为什么我不能用一个简单的语句更新我的价值观?
- python-3.x - 从多个 pubusb 读取数据到同一个 bigquery