如何让日期范围选择器返回值

Question

我正在尝试创建一个简单的日期范围选择器，用于将下拉列表中的日期传递给 sql 查询，现在我只想处理它并将其传递给返回带有所选值的 h1 标记.今天|最后 7 天等。如果您的帮助包括使用 moment js 进行的转换，那将是一个奖励。这是我的代码 这是一个codeandbox的链接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 argument 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