Значение сброшено, а ввод - нет?

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 для очистки даты, поскольку я также столкнулся с той же проблемой. Вам нужно добавить идентификатор / класс на вход вашего компонента даты, иначе вы также можете использовать имя вашего класса => "InputFromTo", но это станет слишком длинным, чтобы получить данные дочерних узлов.

В функции clearDate вы можете видеть, что я проверил значения и очистил их. Поэтому просто попробуйте этот метод и посмотрите, работает ли он.

Функция ограничения используется для установки диапазона максимум в 30 дней.