值被重置，但输入没有?

Question

我正在使用react-day-picker并正在正确重置所选日期，但不确定如何清除DayPickerInput占位符。

示例：我选择一个日期范围，然后点击重置。结果会更改，但旧日期仍显示在输入中。有什么想法吗？

法典：

<div className={isOpen ? 'date-picker block' : 'date-picker'}>
<div className="calendar-picker">
<div className="InputFromTo">
<span className="fal fa-icon fa-calendar-times calendar-picker-icon" aria-hidden="true" title="decorative calendar icon"></span>
<DayPickerInput
value={from}
placeholder="Start Date"
disabled
format="ll"
formatDate={formatDate}
parseDate={parseDate}
dayPickerProps={{
selectedDays: [from, { from, to }],
disabledDays: { after: to },
toMonth: to,
modifiers,
numberOfMonths: 2,
onDayClick: () => filterState.to.getInput().focus(),
}}
onDayChange={handleDayClick}
inputProps={
{readOnly: true }
}
/>
<span className="InputFromTo-to">
<span className="fal fa-icon fa-calendar-times calendar-picker-icon" aria-hidden="true" title="decorative calendar icon"></span>
<DayPickerInput
ref={el => (filterState.to = el)}
value={to}
placeholder="End Date"
disabled
format="ll"
formatDate={formatDate}
parseDate={parseDate}
dayPickerProps={{
selectedDays: [from, { from, to }],
disabledDays: { before: from },
modifiers,
month: from,
fromMonth: from,
numberOfMonths: 2,
}}
onDayChange={handleDayClick}
inputProps={
{readOnly: true }
}
/>
</span>
</div>
</div>
</div>

功能：

function handleResetClick() {
setState({
from: undefined,
to: undefined,
});
}

按钮：

// Custom Clear Refinements Button - clears filters and day picker
const ClearRefinements = ({ items, refine }) => (
<button className="mt-3 clear-button" onClick={() => {refine(items); handleResetClick()}}>
Clear all filters
</button>
);
const CustomClearRefinements = connectCurrentRefinements(ClearRefinements);

Answer 1

import React, { Component } from 'react';
import 'date-fns';
import moment from "moment";
import "moment-timezone";
import DayPickerInput from 'react-day-picker/DayPickerInput';
import { formatDate, parseDate } from 'react-day-picker/moment';
import "moment/locale/id";
import MomentLocaleUtils from 'react-day-picker/moment';
import { connect } from 'react-redux';
import { setDateAction } from '../../actions/saldosAction';
const limit = (event) => {
// e.preventDefault();
if( event.getDate() === new Date().getDate() && event.getMonth() === new Date().getMonth() && event.getFullYear() === new Date().getFullYear() ){
return new Date();
}
var day = event.getDate();
var month = event.getMonth();
var year = event.getFullYear();
var D = `${month+1},${day},${year}`;
var toDate = new Date(D)
toDate.setDate(toDate.getDate()+29);
//   console.log("Limit date => To date=>",toDate)
if(toDate.getFullYear() === new Date().getFullYear()){
if( toDate.getMonth() > new Date().getMonth() )  return new Date();
if( toDate.getMonth() === new Date().getMonth() && toDate.getDate() > new Date().getDate() ) return new Date();
}
// now considering that the "year" < "toDate.year"
return toDate;
}

class DatePickerComponent extends Component {
constructor(props) {
super(props);
this.state = {
from: undefined,
to: undefined
}
this.handleFromChange = this.handleFromChange.bind(this);
this.handleToChange = this.handleToChange.bind(this);
this.clearDate = this.clearDate.bind(this);
};
clearDate() {
this.setState({
from: undefined,
to: undefined,
},()=>{
var fromExist = document.getElementById("from-day") ;
var toExist = document.getElementById("to-day");
if (fromExist && toExist ){
document.getElementById("from-day").value = "";
document.getElementById("to-day").value = "";
}      
})       
}
showFromMonth() {
const { from, to } = this.state;
if (!from) {
return;
}
if (moment(to).diff(moment(from), 'months') < 2) {
this.to.getDayPicker().showMonth(from);
}
}
handleFromChange(from) {
// Change the from date and focus the "to" input field
this.setState({ from });
}
handleToChange(to) {
this.setState({ to }, this.showFromMonth);
const from = this.state.from;
this.props.setDateAction({from,to});
}

render() {
const { from, to } = this.state;
const date = this.props.dateprops;
const modifiers = { start: from, end: to };
if((date.from === undefined && date.to === undefined) && (from !== undefined && to !== undefined) ){
this.clearDate()
}
return (
<div className="InputFromTo">
<DayPickerInput
value={from}
placeholder="From"
format="LL"
formatDate={formatDate}
parseDate={parseDate}
fixedWeeks={4}
dayPickerProps={{
selectedDays: [from, { from, to }],
disabledDays: [{ after: to ? to : new Date(moment()) , before: from ? from : '' }],
toMonth: to,
modifiers,
numberOfMonths: 1,
onDayClick: () => this.to.getInput().focus(),
localeUtils: MomentLocaleUtils, locale: "id"
}}
inputProps={{
id :"from-day",
style: { width: '160px' }
}}
onDayChange={this.handleFromChange}
/>{' '}
-{' '}
<span className="InputFromTo-to">
<DayPickerInput
ref={el => (this.to = el)}
value={to}
placeholder="To"
format="LL"
formatDate={formatDate}
parseDate={parseDate}
dayPickerProps={{
selectedDays: [from, { from, to }],
disabledDays: [{ before: from , after: to ? to : ( from === undefined ? new Date() : limit(from) ) }],
modifiers,
month: from,
fromMonth: from,
numberOfMonths: 1,
localeUtils: MomentLocaleUtils, locale: "id"
}}
inputProps={{
id: "to-day",
style: { width: '160px' }
}}
onDayChange={this.handleToChange}
/>
</span>
</div>
)
}
}

export default connect(null,{setDateAction})(DatePickerComponent);

清除日期按钮位于其他组件中，当我单击清除按钮时，它会通过setDateAction(undefined,undefined)在减速器中进行更改。 所以在 render(( 方法const date = this.props.dateprops;和 if(( 块中，我用来调用 clear(( 方法

在这里，我使用vanila JS来清除日期，因为我也遇到了同样的问题。 您需要在日期组件的输入中添加一个 id/class，否则您也可以使用类名 => "InputFromTo"，但这会变得太长而无法获取子节点数据。

在clearDate函数中，您可以看到我检查了值并清除了它。 因此，只需尝试此方法，看看它是否可以运行。

限制函数用于设置最多 30 天的范围。