代码之家 › 专栏 › 技术社区 › user944513

如何在react js中单击按钮或图标时打开日期选择器

datepicker reactjs javascript

0

user944513 · 技术社区 · 7 年前

我在演示应用程序中使用这个日期选择器

https://www.npmjs.com/package/react-datepicker 但当我点击输入字段时,我的日期选择器就会打开。 当用户点击右边的按钮和图标而不是点击输入时,我们能打开日期选择器吗?

import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

import "./styles.css";

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date()
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {
    this.setState({
      startDate: date
    });
  }

  openDatePicker = () => {};

  render() {
    return (
      <div>
        <DatePicker
          selected={this.state.startDate}
          onChange={this.handleChange}
        />
        <button onClick={this.openDatePicker}>openDate</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);

1 回复 | 直到 7 年前

1

hakeri 7 年前

是的,除了单击组件本身之外,还可以将其打开。您可以使用 open 日期选择器的属性。以下是代码的修改版本:

import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

import "./styles.css";

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date(),
      datePickerIsOpen: false,
    };
    this.handleChange = this.handleChange.bind(this);
    this.openDatePicker = this.openDatePicker.bind(this)
  }

  handleChange(date) {
    this.setState({
      startDate: date
    });
  }

  openDatePicker() {
    this.setState({
      datePickerIsOpen: !this.state.datePickerIsOpen,
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.openDatePicker}>openDate</button>
        <DatePicker
          selected={this.state.startDate}
          onChange={this.handleChange}
          onClickOutside={this.openDatePicker}
          open={this.state.datePickerIsOpen}
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);

如您所见,我们向示例类添加了一个状态,它控制 打开 日期选择器的属性。我还添加了onClickOutside,它可以用来确定如果用户在datepicker打开后单击它的外部应该发生什么。

2

0

OLATOMIDE 6 年前

您需要将按钮设置为自定义输入

import React from 'react'

const CustomInput = React.forwardRef((props,ref) => {

    return (
       <button onClick={props.onClick} ref={ref}>
         {props.value || props.placeholder}
       </button>
    )

})

export default CustomInput;

然后是主成分。做这个

import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";
import CustomInput from "./CustomInput"
import "react-datepicker/dist/react-datepicker.css";

import "./styles.css";

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date()
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {
    this.setState({
      startDate: date
    });
  }

  render() {
    return (
      <div>
        <DatePicker
          selected={this.state.startDate}
          onChange={this.handleChange}
          customInput={<CustomInput />}
          placeholderText="openDate"
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);