Блог

Главная - Вопросы по программированию - Как определить изменение ввода за месяц [тип = дата]

Как определить изменение ввода за месяц [тип = дата]

#javascript #html #reactjs

#javascript #HTML #reactjs

Вопрос:

Я использую поле ввода type=date в компоненте react, как показано ниже.

 <input
  id="date_export"
  className="date-calender"
  type="date"
  disabled={!this.state.disableCalendar}
  onChange={(event) => this.setState({date: event.target.value})}}
  required={true}
  value={this.state.date} />

Теперь, когда пользователь нажимает на поле ввода, появляется календарь и появляются стрелки вверх и вниз для изменения месяца.
введите описание изображения здесь

Как определить по событию, какая стрелка будет нажата?

Комментарии:

1. Я думаю, что это не собственное событие для этого, но вы можете использовать дату, выбранную в качестве ссылки

2. @PedroFelgueiras Я пытаюсь использовать выбранную дату в качестве ссылки, но это не решает мою проблему. Что происходит прямо сейчас, предположим, выбрана дата 6 апреля, и когда я нажимаю на верхнюю стрелку, выбирается дата предыдущих месяцев (например, 6 марта).

Ответ №1:

К сожалению, ОЧЕНЬ сложно иметь стабильный код для вашего ответа, но вот пример:

 class DateForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      dateInput: new Date().toISOString().split('T')[0]
    }
  }
  
  handleChange(e) {
    const { dateInput } = this.state;
    const { value } = e.target;
    this.setState({ dateInput:value });
    const monthInput = new Date(value).getMonth();
    const monthState = new Date(dateInput).getMonth();
    const dateOnInput = new Date(value).getDate();
    const dateState = new Date(dateInput).getDate();
    if(dateOnInput === dateState) {
      if(Math.sign(monthInput - monthState == -1)) {
        console.log('Up arrow');
      } else { 
        console.log('Down arrow');
      }
    } 
  }
  
  render() {
    const { dateInput } = this.state;
    
    return (
      <form>
        <input type="date" value={dateInput} onChange={this.handleChange} />
      </form>
    )
  }
}

ReactDOM.render(<DateForm />, document.getElementById('root')) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Метки: