Как я могу получить средство выбора даты, чтобы вернуть значение

Question

Я пытаюсь создать простой инструмент выбора диапазона дат, который будет использоваться для передачи даты из выпадающего списка в SQL-запрос прямо сейчас. Я просто хочу обработать его и передать его, чтобы вернуть тег h1 с выбранным значением,Сегодня |Последние 7 дней и т. Д. Если ваша помощь включает конвертацию с моментом js, это будет бонусом. Вот мой код А Вот ссылка на коды и поле https://codesandbox.io/s/gotrax-daterange-95u2j?fontsize=14

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Header, Menu, Dropdown, Icon, Button } from "semantic-ui-react";
import moment from "moment";
import "semantic-ui/dist/semantic.min.css";

export default class DatePicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: "",
      wasSubmitted: false,
      dateRange: [
        { key: "Today", text: "Today", value: `${moment()}` },
        { key: "Yesterday", text: "Yesterday", value: "yesterday" },
        { key: "Last 7 Days", text: "Last 7 Days", value: "last 7 days" },
        { key: "Last 30 Days", text: "Last 30 Days", value: "last 30 days" },
        { key: "This Month", text: "This Month", value: "this month" },
        { key: "Last Month", text: "Last Month", value: "last month" },
        { key: "Custom Range", text: "Custom Range", value: "custom range" }
      ]
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit = event => {
    event.preventDefault();
    this.setState({ wasSubmitted: true });
    console.log(this.state.dateRange);
  };

  handleChange = e => {
    this.setState({
      date: e._d
    });
  };

  render() {
    const { date, wasSubmitted } = this.state;
    return (
      <>
      {!wasSubmitted && (
      <div>
        <div>
          <Menu secondary borderless={true} fluid={true}>
            <Menu.Item>
              <Header>Date Range:</Header>
            </Menu.Item>
            <Menu.Item className="width15em">
              <Icon name="calendar" />
              <Dropdown
                placeholder="Pick Date Range"
                options={this.state.dateRange}
              />
            </Menu.Item>
            <Menu.Menu position="right" borderless={true}>
              <Menu.Item>
                <Button
                  primary
                  size="small"
                  onSubmit={this.handleSubmit}
                  type="submit"
                  value={this.state.dateRange}
                  onChange={this.handleChange}
                >
                  Update
                </Button>
              </Menu.Item>
              <Menu.Item>
                <Button color="green" size="small">
                  Export CSV
                </Button>
              </Menu.Item>
            </Menu.Menu>
          </Menu>
        </div>
      </div>
      )}
      </>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<DatePicker />, rootElement);

Answer 1

Чтобы немного лучше ответить на вопрос, я вычислил даты, для настраиваемого диапазона дат вам понадобится средство выбора диапазона дат, например, https://react -day-picker.js.org / examples / selected-range /

Я также добавил форму с onSubmit, чтобы обновить console.logs, что вы хотели.

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Header, Menu, Dropdown, Icon, Button } from "semantic-ui-react";
import moment from "moment";
import "semantic-ui/dist/semantic.min.css";

export default class DatePicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: "",
      wasSubmitted: false,
      dateRange: [
        {
          key: "Today",
          text: "Today",
          value: {
            start: moment().format("YYYY-MM-DD"),
            end: moment().format("YYYY-MM-DD")
          }
        },
        {
          key: "Yesterday",
          text: "Yesterday",
          value: {
            start: moment()
              .subtract(1, "d")
              .format("YYYY-MM-DD"),
            end: moment()
              .subtract(1, "d")
              .format("YYYY-MM-DD")
          }
        },
        {
          key: "Last 7 Days",
          text: "Last 7 Days",
          value: {
            start: moment()
              .subtract(7, "d")
              .format("YYYY-MM-DD"),
            end: moment().format("YYYY-MM-DD")
          }
        },
        {
          key: "Last 30 Days",
          text: "Last 30 Days",
          value: {
            start: moment()
              .subtract(30, "d")
              .format("YYYY-MM-DD"),
            end: moment().format("YYYY-MM-DD")
          }
        },
        {
          key: "This Month",
          text: "This Month",
          value: {
            start: moment()
              .startOf("month")
              .format("YYYY-MM-DD"),
            end: moment().format("YYYY-MM-DD")
          }
        },
        {
          key: "Last Month",
          text: "Last Month",
          value: {
            start: moment()
              .subtract(1, "month")
              .startOf("month")
              .format("YYYY-MM-DD"),
            end: moment()
              .subtract(1, "month")
              .endOf("month")
              .format("YYYY-MM-DD")
          }
        },
        { key: "Custom Range", text: "Custom Range", value: "custom range" }
      ]
    };
    // this.handleChange = this.handleChange.bind(this);
    // this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit = event => {
    console.log(this.state.date);
    event.preventDefault();
    this.setState({ wasSubmitted: true });
  };

  handleChange = (e, d) => {
    e.preventDefault();
    e.persist();
    this.setState({
      date: d.value
    });
  };

  render() {
    const { date, wasSubmitted } = this.state;
    return (
      <div>
        <div>
          <Menu secondary borderless={true} fluid={true}>
            <Menu.Item>
              <Header>Date Range:</Header>
            </Menu.Item>
            <Menu.Item className="width15em">
              <Icon name="calendar" />
              <Dropdown
                placeholder="Pick Date Range"
                options={this.state.dateRange}
                onChange={this.handleChange}
              />
            </Menu.Item>
            <Menu.Menu position="right" borderless="true">
              <Menu.Item>
                <form onSubmit={this.handleSubmit}>
                  <Button
                    primary
                    size="small"
                    onSubmit={this.handleSubmit}
                    type="submit"
                    value={this.state.date}
                  >
                    Update
                  </Button>
                </form>
              </Menu.Item>
              <Menu.Item>
                <Button color="green" size="small">
                  Export CSV
                </Button>
              </Menu.Item>
            </Menu.Menu>
          </Menu>
        </div>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<DatePicker />, rootElement);

Answer 2

Я дал попробовать. Я не понимаю, что это значит в этом месяце (это диапазон?). Для пользовательского диапазона необходимо добавить соответствующий калькулятор или поле ввода:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Header, Menu, Dropdown, Icon, Button } from "semantic-ui-react";
import moment from "moment";
import "semantic-ui/dist/semantic.min.css";

export default class DatePicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: "",
      wasSubmitted: false,
      dateRange: [ //Added moment formatting
        { key: "Today", text: "Today", value: moment().subtract(7,'d').format('YYYY-MM-DD') },
        { key: "Yesterday", text: "Yesterday", value: moment().subtract(1,'d').format('YYYY-MM-DD') },
        { key: "Last 7 Days", text: "Last 7 Days", value: moment().subtract(7,'d').format('YYYY-MM-DD') },
        { key: "Last 30 Days", text: "Last 30 Days", value: moment().subtract(30,'d').format('YYYY-MM-DD') },
        { key: "This Month", text: "This Month", value: "this month" },
        { key: "Last Month", text: "Last Month", value: moment().subtract(1,'months').format('YYYY-MM-DD') },
        { key: "Custom Range", text: "Custom Range", value: "custom range" } //You need to add custom input and the moment pattern would be same
      ]
    };
    // this.handleChange = this.handleChange.bind(this);
    // this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit = event => {
    console.log(this.state.dateRange);
    event.preventDefault();
    this.setState({ wasSubmitted: true });

  };

  handleChange = (e,d) => { //from semantic documentation second arguement is data
    e.preventDefault();
    e.persist()
    this.setState({
      date: d.value
    });
  };

  render() {
    const { date, wasSubmitted } = this.state;
    console.log(date)
    return (
      <div>
        <div>
          <Menu secondary borderless={true} fluid={true}>
            <Menu.Item>
              <Header>Date Range:</Header>
            </Menu.Item>
            <Menu.Item className="width15em">
              <Icon name="calendar" />
              <Dropdown
                placeholder="Pick Date Range"
                options={this.state.dateRange}
                onChange={this.handleChange}
              />
            </Menu.Item>
            <Menu.Menu position="right" borderless={true}>
              <Menu.Item>
                <Button
                  primary
                  size="small"
                  onSubmit={this.handleSubmit}
                  type="submit"
                  value={this.state.dateRange}
                >
                  Update
                </Button>
              </Menu.Item>
              <Menu.Item>
                <Button color="green" size="small">
                  Export CSV
                </Button>
              </Menu.Item>
            </Menu.Menu>
          </Menu>
        </div>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<DatePicker />, rootElement);

Демонстрационная ссылка: https://codesandbox.io/s/gotrax-daterange-h0rv1