【发布时间】：2021-03-21 08:38:57
【问题描述】：
react-bootstrap-daterangepicker 的初始状态未在我的项目中更新。
import DateRangePicker from 'react-bootstrap-daterangepicker';
...
constructor(props) {
super(props);
this.state = {
startDate: new Date(),
endDate: new Date()
};
}
...
updateDates = (event) => {
const period = event.target.value;
let start, end = null;
const today = new Date();
switch(period) {
case 'today':
start = today;
end = today;
break;
case 'thisMonth':
start = new Date(today.getFullYear(), today.getMonth(), 1);
end = new Date(today.getFullYear(), today.getMonth()+1, 0);
break;
case 'thisWeek':
const first = today.getDate() - today.getDay();
const last = first + 6;
start = new Date(today.setDate(first));
end = new Date(today.setDate(last));
break;
case 'thisYear':
start = new Date(today.getFullYear(), 0, 1);
end = new Date(today.getFullYear(), 11, 31);
break;
default:
break;
}
if(start && end) {
this.setState({
startDate: start,
endDate: end
});
}
}
...
render() {
const sDate = this.state.startDate.toLocaleDateString();
const eDate = this.state.endDate.toLocaleDateString();
console.log(sDate);
console.log(eDate);
...
<DateRangePicker
initialSettings={{ startDate: sDate.toString(), endDate: eDate.toString() }}
onCallback={this.handleSelect}
>
<input type="text" className="form-control" />
</DateRangePicker>
...
<select className="form-control" id="dtOption" onChange={this.updateDates}>
<option value="">Select</option>
<option value="today">Today</option>
<option value="thisMonth">This Month</option>
<option value="thisWeek">This Week</option>
<option value="thisYear">This Year</option>
</select>
}
这很奇怪，因为 render() 方法中的 console.logs 在我在下拉列表中选择日期范围后会显示更新的日期，但它不会更新 DateRangePicker 输入。
【问题讨论】：
-
我猜到的一个原因是 date.toLocaleDateString() 没有以 DateRangePicker 组件的预期格式返回日期。值得尝试。祝你好运
-
@SachinVishwakarma 它是。 DateRangePicker，格式为 mm/dd/yyyy 的字符串除外