Question

我需要为日历中的特定日期添加颜色。例如星期天是假期所以它应该是红色的，如果在几周内有任何假期，我需要给它们上色。怎么办呢？

var React = require('react');
var DatePicker = require('react-datepicker');
var moment = require('moment');

require('react-datepicker/dist/react-datepicker.css');

class Calender extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      startDate: moment()
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {

    this.setState({ startDate: date });
  }

  render() {
    return (

      <div className="cal">
        <DatePicker className="datepic"
          inline
          fixedHeight
          fixedWidth
          selected={this.state.startDate}
          onChange={this.handleChange}
          showYearDropdown
          monthsShown={2} />
      </div>
    );
  }
}

export default Calender;

Answer 1

这里有一个突出显示日期的部分：

DatePicker Doc

使用突出显示的选项会在您选择的特定日期的div中添加一个“react-datepicker__day - highlight”类。您可以在css中覆盖该样式，以指定不同的背景颜色，文本颜色等......

如何在reactjs中为日历中的特定日期赋予颜色

1 个答案: