Question

尝试通过点击react-datepicker组件的图标打开datepicker，我已经浏览了他们的文档和问题链接，但发现它没有多大用处。

<DatePicker
        {...startDateOpts}
        id='abc'
        maxDate={moment()}
        onChange={this.handleStartChange}
        placeholderText='Start Date'
        popoverAttachment={smallScreen ? 'bottom center' : undefined}
        popoverTargetAttachment={smallScreen ? 'top center' : undefined}
        popoverTargetOffset={smallScreen ? '0px 0px' : undefined}
      />

我试过React-datepicker docs link，但没有运气。

Answer 1

使用label包装DatePicker。所有点击内部标签调用都集中在输入上，即打开日历。

<label>
    <DatePicker/>
</label>

Answer 2

我刚刚那样完成了，

svg图标已由webpack导入

    import IconCalendar from 'IconCalendar';

主要组件中的渲染功能

    render() {
        const {reportSettings: {
                dateTo
            }} = this.props;
        return (
            <div id="date-picker">
                <Label for="date-picker-1">Select Results date</Label>
                <DatePicker todayButton={"Today"} dateFormat={Constants.DATE_FORMAT} customInput={(<ExampleCustomInput/>)} selected={dateTo} onChange={this.handleChange}/>
            </div>
        );
    }

呈现输入字段和图标的辅助组件

class ExampleCustomInput extends Component {
    static propTypes = {
        onClick: PropTypes.func,
        value: PropTypes.string
    }
    render() {
        const {value, onClick} = this.props;

        return (
            <div className="form-group">
                <input type="text" className="form-control" value={value} onClick={onClick}/>
                <IconCalendar className="date-picker-icon" onClick={onClick}></IconCalendar>
            </div>
        );
    }
}

最后css帮我在输入栏上显示图标

.date-picker-icon {
            float: right;
            margin-right: 6px;
            margin-top: -30px;
            position: relative;
            z-index: 2;
        }

Answer 3

在添加更新版本的react-datepicker，即0.30.0后，我获得了道具自动对焦，但是，我又遇到了问题，只有第一次使用，然后我尝试使用如下所示的

refs='startDate'

在datepicker然后在这个对象中我得到了

this.refs.startDate.deferFocusInput();

所以我打电话给我，点击图标

打开日期选择器

Answer 4

在版本0.30.0中添加，我认为customInput prop允许您这样做。这样你就可以创建自己的输入组件并将onClick处理程序附加到其中的图标。

Answer 5

如果您要以编程方式打开日期选择器，或者如果您不想使用<label>包装器，则可以为日期选择器设置 ref 组件，然后使用setOpen(bool)将其打开。请注意，由于我们使用的是refs，因此该组件应为有状态。

示例：

openDatepicker = () => this._calendar.setOpen(true);


render() {
    <Datepicker
        {...datepickerProps}
        ref={(c) => this._calendar = c} />

    <img src={iconImg} onClick={this.openDatepicker} />
}

日期选择器的Github上目前有一个open issue，说明文档中没有此内容。

Answer 6

@Jayant Patil我已经实现了单击图标即可打开 react-datepicker 的功能。

这就是我的方法。

我围绕日期选择器创建了一个包装器组件，并将一个id作为道具传递给它。

bytesSent

然后使用标签将图标括起来，然后传递ID。

class DateRangePicker extends React.Component {
    constructor(props, context) {
        super(props, context);
        // DatePicker is a controlled component.
        // This means that you need to provide an input value
        // and an onChange handler that updates this value.
    }
    render() {
        return <DatePicker
            id={this.props.id}
            selected={this.props.selected}
            onChange={this.props.onChange}
            onChangeRaw={this.props.onChangeRaw}
            onBlur={this.props.onBlur}
            peekNextMonth={true}
            showMonthDropdown={true}
            showYearDropdown={true}
            dropdownMode="select"
            placeholderText="MM/DD/YYYY"
            dateFormat="MM/DD/YYYY"
            shouldCloseOnSelect={true}
            defaultValue={null}
            />
    }

}
export default DateRangePicker;

工作原理不会影响任何功能，不像@tre所说的那样仅将带有标签的图标括起来

        <DateRangePicker
            ref={'calendar1'}
            id={'fromdate'}
            dateFormat={gridAttributes.DEFAULT_DATE_FORMAT}
            selected={this.state.fromDate}
            onChange={this.handleDateChange.bind(this, 'fromDate')}
            onChangeRaw={(e) => this.handleRawFromDateChange(e)}
            onBlur={this.handleFromBlur.bind(this)}
            peekNextMonth={true}
            placeholderText={gridAttributes.DEFAULT_DATE_FORMAT}
            showMonthDropdown={true}
            showYearDropdown={true}
            defaultValue={null}
            className="calendar1"
        />
 <label className="icon iconCalendar calendar" style={{ fontSize: '20px' }} htmlFor='fromdate' />

使日历处于打开状态，并且仅当我们在日历外部单击时才能关闭。

Answer 7

被接受的答案存在一些问题，例如-> 当用户选择日期时，压延机不会按日期选择关闭，因为<label>再次尝试setOpen = true，因此即使选择了日期，日历也仍然打开。

如何克服这个问题？参见下面的简单答案->

this.state = {
openCalendar : false,
date : new Date()
}

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

      render(){
           return(
               <label>
                   <DatePicker
                      selected={this.state.date}
                      onFocus={() => this.setState({ openCalendar: true })}
                      onChange={this.handleDateChange}
                      open={this.state.openCalendar}
                  />
                 //you can add any icon here and on click that, the date will work as expected.
               <svg/>  //add any icon you want
               </label>
    )
  }

Answer 8

这可以使用 ref 实现，如下所示：

const datepickerRef = useRef(null); // OR React.createRef();  if you are not using hooks

// OPENS UP THE DATEPICKER WHEN THE CALENDAR ICON IS CLICKED FOR THE INPUT FIELD
function handleClickDatepickerIcon() {
  const datepickerElement = datepickerRef.current;
  // console.log("datepickerElement = ", datepickerElement);
  datepickerElement.setFocus(true);
}

<DatePicker
  {...startDateOpts}
  id="abc"
  maxDate={moment()}
  onChange={this.handleStartChange}
  placeholderText="Start Date"
  popoverAttachment={smallScreen ? "bottom center" : undefined}
  popoverTargetAttachment={smallScreen ? "top center" : undefined}
  popoverTargetOffset={smallScreen ? "0px 0px" : undefined}
  ref={datepickerRef} // attach the ref
/>;

{/* CALENDAR ICON */}
<span className="calender-placment" onClick={() => handleClickDatepickerIcon()}>
  <i className="fal fa-calendar-alt" />
</span>

React DatePicker如何在点击图标时打开datepicker

8 个答案: