Блог

 import React from 'react';
import DatePicker from 'react-datepicker';

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: ''
    };
  }

  isWeekDay = date => {
    const d = date.getDay();
    return d !== 0 || d !== 6;
  }

  render() {
    const { date } = this.state;
    return (
      <div>
        <h3>Calendar</h3>
        <DatePicker
          showMonthDropdown
          showYearDropdown
          dropdownMode="select"
          filterDate={this.isWeekDay}
          selected={date}
          onChange={val => this.setState({ date: val })}
          todayButton="Go to Today"
          onChangeRaw={event => this.setState({ date: event.target.value })}
        />
      </div>
    );
  }
}

export default Example;
  

Я использую библиотеку react-datepicker и добавляю несколько свойств, которые мне нужны, например, todayButton, выпадающий список месяца и года и т. Д. Мне нужен значок календаря рядом с вводом datepicker, с помощью которого должна работать та же функциональность — открыть календарь и иметь возможность устанавливать даты.

Добавлено изображение значка с помощью css, как показано ниже.

 .react-datepicker__input-container::after {
  background: url('./images.jpg') right 2px no-repeat;
    content: '';
    color: red;
    width: 18px;
    height: 21px;
    position: absolute;
    right: 0;
    top: 0;
    background-color: white;
    border-left: 1px solid black;
}
  

Он работает для браузера Chrome, но при нажатии на значок изображения не работает в Edge и IE11.