How to identify about month change in input[type=date]

user_6696004 0
Viewed 626

I am using the input field type=date in react component as shown below.

<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} />

Now, when the user clicks on the input field, the calendar pops up and there is an up and down arrow to change the month. enter image description here

How to identify from the event which arrow gets clicked?

reactjs html javascript
1 Answers

Unfortunately, It's VERY hard to have a stable code for your answer, but here is an example:

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>

user_141335800
Related