如何在React日期范围选择器中获取开始和结束日期值
How to get start and end date value in React date range picker?
在我的代码中,我使用了一个用于日期范围选择器的npm-react组件(https://www.npmjs.com/package/react-date-range)。在我的屏幕上,我有一个申请日期按钮。如果我点击该按钮,我想打印日期范围值。如何在单击时获得该范围值?
var Calendarcomponent = React.createClass({
getInitialState: function(){
this.state = {
'rangePicker' : {},
'linked' : {},
'datePicker' : null,
'firstDayOfWeek' : null,
'predefined' : {},
}
}
handleSelect:function(range){
console.log(range);
},
handleClick:function(range){
console.log(range);
},
render:function(){
var rangePicker = this.state;
var format = 'dddd, D MMMM YYYY';
return (
<div>
<h4>FILTER BY DATE</h4>
<div className="date-range text-center">
<div className="group">
<label>Date range</label>
<input className="inputMaterial" type="text" value={ rangePicker['endDate'] && rangePicker['endDate'].format(format).toString() } required />
</div>
</div>
<div className="set-borrow-dates">
<div id="select-date">Select Borrow date</div>
<DateRange onInit={this.handleSelect} onclick={this.handleClick} />
<button id="apply-dates"><i className="fa fa-check-circle"></i> Apply Dates</button>
</div>
</div>
)
}
});
您可以使用onChange
回调将范围存储在状态中,并在单击按钮时读取:
handleSelect(range){
this.setState({ range });
},
handleClick(){
console.log(this.state.range);
},
render:function(){
return <div>
<DateRange onInit={this.handleSelect}
onChange={this.handleSelect} />
<button id="apply-dates" onClick={this.handleClick} >
<i className="fa fa-check-circle"></i>
Apply Dates
</button>
</div>;
}
相关文章:
- 希望日期开始结束于while循环中的一个房间id的一个数组
- jQuery Datepicker从日期开始设置默认值
- 高图表日期时间从错误的日期开始
- Javascript - 从当前日期开始的上个月计算
- 正在加载动态日历以在一个月的正确日期开始
- 如何在Moment.js中从日期开始获取一个月中的星期
- javascript从给定日期开始按月递增日期
- 从单击日期开始将数据放入输入类型中
- 用于调查的 Javascript:从页面加载时从出生日期开始计算年龄 从预填充信息加载
- 日期选取器日期范围:最大日期的最小日期 = 开始日期 + 1 天
- 谷歌时间线图表从错误的日期开始
- jquery从格式01/02/2010的日期开始修剪前导零
- Javascript从日期开始获取星期几
- 如何使用Javascript AngularJS从日期选择器中的当前日期开始
- 如何将日期时间分配给具有间隔和日期开始的高图
- 使用flipclock.js从一个特定的日期开始倒数
- 在代码编写器中验证开始和结束日期.开始日期小于结束日期
- 在ng-repeat Angularjs中显示从日期开始的时间
- 从日期开始增加变量Javascript
- 如何选择从开始日期到结束日期(即不包括结束日期)开始的序列化数据