{!!createPeriod && (
<div className="FilterForm__item FilterForm__item--full">
<p>{createPeriod.label}</p>
<div className="FilterForm__range">
<div className={`FilterForm__input range-field ${this.props.form["InvoicesSearch[createdFrom]"] && 'FilterForm__input--fill'}`}>
<label>
<DatePicker
dateFormat="dd.MM.yyyy"
selected={this.props.form["InvoicesSearch[createdFrom]"]}
name="InvoicesSearch[createdFrom]"
withPortal={isMobile}
maxDate={this.props.form["InvoicesSearch[createdTo]"]}
onChangeRaw={e => e.preventDefault()}
placeholderText="От"
popperModifiers={{
offset: {
enabled: true,
offset: '5px, 10px',
offsetRight: '400px'
},
preventOverflow: {
enabled: true,
escapeWithReference: false, // force popper to stay in viewport (even when input is scrolled out of view)
boundariesElement: 'viewport'
}
}}
onChange={(e) => this.props.handleChange("InvoicesSearch[createdFrom]", e)}
/>
<i className="fal fa-calendar"></i>
</label>
</div>
<div className={`FilterForm__input range-field ${this.props.form["InvoicesSearch[createdTo]"] && 'FilterForm__input--fill'}`}>
<label>
<DatePicker
dateFormat="dd.MM.yyyy"
selected={this.props.form["InvoicesSearch[createdTo]"]}
name="InvoicesSearch[createdTo]"
withPortal={isMobile}
onChangeRaw={e => e.preventDefault()}
placeholderText="До"
popperModifiers={{
offset: {
enabled: true,
offset: '5px, 10px',
offsetRight: '400px'
},
preventOverflow: {
enabled: true,
escapeWithReference: false, // force popper to stay in viewport (even when input is scrolled out of view)
boundariesElement: 'viewport'
}
}}
onChange={(e) => this.props.handleChange("InvoicesSearch[createdTo]", e)}
/>
<i className="fal fa-calendar"></i>
</label>
</div>
</div>
</div>
)}
handleChange = (key, value) => {
this.setState({
form: {
...this.state.form,
[key]: value
}
})
}