Как отображать дату на основе разных форматов даты из редуктора redux в React?

Question

Я передаю редуктор всем страницам, на которых есть необходимая информация. Теперь, на основе выбора формата даты из раскрывающегося списка, он передается всем страницам.

Я хочу привязать этот выбранный элемент к пузырьковой диаграмме по оси x, где диаграмма доступна на другой странице.

 <Field
                          name="company_dateformat"
                          g_value={this.getValue("company_dateformat")}
                          component={renderSelectField}
                          type="select"
                          id="company_dateformat"
                          label={LBLDATEFORMAT}
                          className="form-control"
                          validate={[required]}
                          onChng={(e) => {
                            this.setState({
                              company_dateformat: e.target.value,
                            });
                          }}
                        >
                          <option value="">{`--${LBLSELECT}--`}</option>
                          {Object.keys(DateFormats).map((d, key) => (
                            <option
                              key={DateFormats[d].code}
                              value={DateFormats[d].code}
                            >
                              {DateFormats[d].name}
                            </option>
                          ))}
                        </Field>

Это раскрывающийся список, из которого выбранные значения переносятся на все страницы.

constructor(props) {
    super(props);
    let currentdate = new Date();
    this.state = {
      options: {},
    };
    //this.chartDetails = this.chartDetails.bind(this);
    console.log(this.props.graph_data);
  }

  componentDidMount() {
    console.log("componentDidMount", this.props.date1, this.props.date2);
    this.chartDetails();
  }

  getDays() {
    var dTime = this.props.date2.getTime() - this.props.date1.getTime();
    let x = parseInt(dTime / (1000 * 3600 * 24));
    return x;
  }

  getDateFormat = (xDate) => {
    let yyyy = xDate.getFullYear();
    let mm =
      xDate.getMonth() >= 9
        ? xDate.getMonth() + 1
        : "0" + (xDate.getMonth() + 1);
    let dd = xDate.getDate() > 9 ? xDate.getDate() : "0" + xDate.getDate();
    return yyyy + "-" + mm + "-" + dd;
  };

  componentDidUpdate(prevProps) {
    if (prevProps.graph_data != this.props.graph_data) {
      this.chartDetails();
    }
  }

  chartDetails = () => {
    let monthNames = [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec",
    ];

    let vColor;
    if (this.props.rysstateid == 1) {
      vColor = "#e55853";
    }
    if (this.props.rysstateid == 2) {
      vColor = "#f5c83b";
    }
    if (this.props.rysstateid == 3) {
      vColor = "#a38e7a";
    }
    if (this.props.rysstateid == 4) {
      vColor = "#2892d7";
    }

    if (this.props.date1) {
      let startdate = new Date(this.props.date1.getTime());

      let startmonth = startdate.getMonth();
      let startyear = startdate.getUTCFullYear();

      let currentdate = new Date(this.props.date2.getTime());
      let currmonth = currentdate.getMonth();
      let curryear = currentdate.getUTCFullYear();

      let startmonthname = monthNames[startmonth];
      let currmonthname = monthNames[currmonth];
      let noofdays = parseInt(
        (currentdate.getTime() - startdate.getTime()) / (24 * 60 * 60 * 1000)
      );
      let dateformat = this.props.dateformat;
    }

    let dps = [];
    let minValue = 0,
      maxValue = 10;
    if (this.props.graph_data.length) {

      for (var i = 0; i < this.props.graph_data.length; i++) {

        let obj = {
          color: vColor,

          label: this.props.graph_data[i].day.toString(),
          x1: this.props.graph_data[i].org_value,
          y: parseInt(this.props.graph_data[i].y),
          z: this.props.graph_data[i].weight,
        };
        dps.push(obj);
      }
      //minValue = minValue - 1;
    }

    this.setState({
      options: {
        interactivityEnabled: true,
        animationEnabled: true,
        animationDuration: 1000,
        zoomEnabled: true,
        zoomType: "xy",
        backgroundColor: "transparent",
        title: {
          fontSize: 26,
        },
        axisX1: {
          labelAngle: 45,
        },
        axisY: {
          includeZero: false,
          valueFormatString: "#,###",
          title: this.props.rysstate,
          position: "top",
          minimum: minValue,
          interval: 1,
          maximum: maxValue,
          gridThickness: 0,
          viewportMinimum: -10,
        },
        data: [
          {
            type: "bubble",
            toolTipContent: this.props.rysstate + ": {y}<br>Count: {x1}",
            dataPoints: dps,
          },
        ],
      },
    });
  };
  handleTabClick(a, b, c, d) {}

  render() {
    return (
      <CanvasJSChart
        options={this.state.options}
        onElementsClick={(elems) => {
          if (this.props.linktoreport) {
            window.location =
              String(window.location.href).split("schome")[0] +
              "schome/reports/rate_your_state";
          }
        }}
      />
    );
  }

Выше представлен компонент диаграммы.