How can I get the daterange picker to return the value

Question

I am trying to create a simple date range picker that will be used to pass the date from the drop-down to a sql query right now I just want to handle it and pass it to return an h1 tag with the value picked. Today | Last 7 Days ect. If your help includes the conversion with moment js that would be a bonus. Here is my code And Here is a link to a codesandbox 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

To answer the question a little better I calculated the dates, for the custom date range you need a date range picker something like https://react-day-picker.js.org/examples/selected-range/

I also added a form with the onSubmit so that update console.logs what you wanted.

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);