react-advance-jalaali-datepicker2/src/Partials/Months.js

Jalaali React Date Picker developed with love by Alireza Kasaaian

import React from "react";

class Months extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      months: [
        "فروردین",
        "اردیبهشت",
        "خرداد",
        "تیر",
        "مرداد",
        "شهریور",
        "مهر",
        "آبان",
        "آذر",
        "دی",
        "بهمن",
        "اسفند"
      ],
      monthPickerView: false,
      selectedMonth: this.props.month
    };
  }

  monthClicked(i, e) {
    let {clickEvent} = this.props;
    if (clickEvent) clickEvent(i);
    this.setState({monthPickerView: false, selectedMonth: i});
  }

  renderMonths() {
    let {months, selectedMonth} = this.state;
    let result = [];
    for (let i = 1; months.length >= i; i++) {
      if (selectedMonth == i)
        result.push(
          <div key={i} className="month-items selected">
            <p>{months[i - 1]}</p>
          </div>
        );
      else
        result.push(
          <div
            key={i}
            className="month-items"
            onClick={e => this.monthClicked(i, e)}
          >
            <p>{months[i - 1]}</p>
          </div>
        );
    }
    return result;
  }

  render() {
    let {month, monthTitleEnable} = this.props;
    let {months, monthPickerView} = this.state;
    return (
      <div className="JC-months">
        {monthTitleEnable && <span>ماه: </span>}
        <div className="holder">
          <div onClick={() => this.monthClicked(month - 1)} className="prev">
            <i className="fas fa-angle-left"> </i>
          </div>
          <div
            onClick={() => {
              this.setState({monthPickerView: !monthPickerView});
            }}
            className="print-month"
          >
            {months[month - 1]}
          </div>
          <div onClick={() => this.monthClicked(month + 1)} className="next">
            <i className="fas fa-angle-right"> </i>
          </div>
        </div>
        {monthPickerView && (
            <div className="monthPicker">{this.renderMonths()}</div>
        )}
      </div>
    );
  }
}

export default Months;