javascript - customInput 未在 react-datepicker 中返回所选日期
问题描述
我正在尝试单击图标打开react-datepicker 。为此,我正在使用customInput
参数。react-datepicker在单击图标时打开,但onChange
处理程序未获取所选日期。这是我的代码:
<div className="date-icon">
<DatePicker
id="date-picker"
dateFormat="YYYY-MM-DD"
selected={this.state.startDate}
showMonthDropdown
onChange={this.handleDateChange.bind(this)}
customInput={<img src="/img/cal.svg" alt=""/>}
//includeDates={this.state.activityDates}
/>
<br/>
</div>
这是handleDateChange函数
handleDateChange(date, event){
console.log(document.getElementById("date-picker").value)
}
我正在获取undefined
控制台日志。
当我删除该customInput
参数时,日期会按预期打印在控制台中。
解决方案
默认输入是一个input
元素,它有一个value
. 您的自定义输入<img src="/img/cal.svg" alt=""/>
不是输入元素,并且没有value
.
您可以改为将给定的时刻存储在onChange
处理程序中并将其存储在状态中并改为使用它。
例子
class App extends React.Component {
state = { selectedDate: moment() };
handleDateChange = m => {
this.setState({ selectedDate: m });
console.log(m.format("YYYY-MM-DD"));
};
render() {
return (
<DatePicker
id="date-picker"
dateFormat="YYYY-MM-DD"
selected={this.state.selectedDate}
showMonthDropdown
onChange={this.handleDateChange}
customInput={<img src="/img/cal.svg" alt=""/>}
/>
);
}
}
推荐阅读
- php - PHP Simple HTML Dom Parser,跳过某些元素的单词替换
- android - 在应用程序版本更新的情况下,共享扩展在 android 上不起作用
- python - 使用 python 设置代理信息
- java - 如何使用毕加索从 URL 更改导航抽屉中的汉堡菜单图标?
- aion - 通过前端部署 Aion dApp 时出错:fs.readFileSync 不是函数
- json - 如何将密钥传递给 jq 文件
- c++ - 来自不同类型的模板类复制构造:它应该遵循五规则吗?
- jmeter - 我如何/可以/应该增加 JMeter 中的日期/时间参数?
- php - Ubuntu上的PHP扩展目录
- android - 自定义属性未在样式和主题中解析