Реакция. Js - Как отображать только дату для формы выбора json массив при вводе даты html? - PullRequest
Новая
       14

Реакция. Js - Как отображать только дату для формы выбора json массив при вводе даты html?

0 голосов
/ 26 марта 2020

У меня есть api, и существует объект даты, и я хочу, чтобы в этом поле ввода даты отображалось только r доступная дата, которая существует в api для выбора, если какая-то дата будет недоступна в api, которую следует отключить, чтобы различать цвет фона, который может сделать пользователь понимаю, что эта дата доступна для выбора, и это не так. Я не знаю, как это сделать. вот мой код. 

import React, { Component } from "react";
import moment from "moment";
import config from "../../Main";

const colourStyles = {
  control: styles => ({
    ...styles,
    backgroundColor: "white",
    border: "2px solid white",
    height: "20px",
    borderBottom: "1px solid gray"
  })
};

class MapForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      walk: []
    };
  }

  async componentDidMount() {
    try {
      const res = await fetch(`http://www.mocky.io/v2/5e7ccf50350000c160069b0f`, {
        method: "GET",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
          Authorization: "Bearer " + JSON.parse(authToken)
        }
      });
      const walk = await res.json();
      this.setState({
        walk
      });
    } catch (e) {
      console.log(e);
    }
  }

  render() {
    const { walk } = this.state;
    return (
      <form onSubmit={this.props.loaddata}>
        <div className="row" style={{ marginTop: "20px" }}>
          <div
            className="col-sm-3"
            style={{ top: "7px", position: "relative" }}
          >
            <div className="form-group" style={{ marginTop: "-4px" }}>
              <input
                type="date"
                name="from"
                onChange={this.onChange}
                defaultValue={this.props.load}
                style={{ height: "38px" }}
                max={moment().format("YYYY-MM-DD")}
                className="form-control "
              />
            </div>
          </div>
        </div>
      </form>
    );
  }
}

export default MapForm;

этот http://www.mocky.io/v2/5e7ccf50350000c160069b0f содержит поле даты, и я хочу, чтобы это поле ввода даты позволяло мне выбирать только те даты, которые существуют на API, а другую следует отключить или другой цвет.

...