Reactjs React DatePicker如何在单击图标时打开DatePicker

我试图在点击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（即0.30.0）后，我得到了道具自动对焦，但我再次遇到了问题，这只是第一次出现，然后我尝试使用下面的ref

refs='startDate'

在datepicker中，然后在这个对象中

this.refs.startDate.deferFocusInput();

---

所以我打电话给它，点击0.30.0版本中添加的图标，打开日期选择器，我想它会允许你这样做。这样，您就可以创建自己的输入组件，并将onClick处理程序附加到其中的图标上。

我刚刚通过这种方式完成了这项工作

svg图标已通过网页包导入

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

---

只需用标签包装日期选择器。所有点击标签内的呼叫集中于输入，即打开日历

<label>
    <DatePicker/>
</label>

---

@Jayant Patil我已经实现了点击图标打开反应日期选择器的功能

我就是这样做的

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

类DateRangePicker扩展React.Component{ 构造函数（道具、上下文）{ 超级（道具、背景）； //DatePicker是一个受控组件。 //这意味着您需要提供一个输入值 //以及更新此值的onChange处理程序。 } render（）{ 返回 } } 导出默认日期范围选择器；

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

this.handleRawFromDateChange（e）}
onBlur={this.handleFromBlur.bind（this）}
peekNextMonth={true}
占位符文本={gridAttributes.DEFAULT_DATE_FORMAT}
showMonthDropdown={true}
showYearDropdown={true}
defaultValue={null}
className=“calendar1”
/>

这不会影响任何功能，不像@tre所说的仅用标签封装图标

---

导致日历处于打开状态，并且只有在我们在日历外部单击时才能关闭。

如果您想以编程方式打开日期选择器，或者如果您只是不想使用

包装器，您可以将ref设置为日期选择器组件，并使用

setOpen（bool）

打开它。请注意，由于我们使用的是引用，因此组件应该是有状态的

<label>
    <DatePicker/>
</label>

例如：

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


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

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

openDatepicker=（）=>this.\u calendar.setOpen（true）；
render（）{
这个。_calendar=c}/>
}

---

目前，datepicker的Github上有一个声明，说明文档中缺少此项。

公认的答案是其中存在一些问题，如-> 当用户选择日期时，日历不会在日期选择时关闭，因为

再次尝试

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

this.state={
openCalendar:false，
日期：新日期（）
}
handleChange=date=>this.setState（{setDate:date}）；
render（）{
返回(
this.setState（{openCalendar:true}）
onChange={this.handleDateChange}
open={this.state.openCalendar}
/>
//您可以在此处添加任何图标，单击该图标，日期将按预期工作。
//添加任何你想要的图标
)
}

这可以通过使用

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>

const datepickerRef=useRef（null）；//或者React.createRef（）；如果你没有使用钩子
//单击输入字段的日历图标时打开日期选择器
函数handleClickDatepickerIcon（）{
const datepickerElement=datepickerRef.current；
//log（“datepickerElement=，datepickerElement”）；
datepickerElement.setFocus（true）；
}
;
{/*日历图标*/}
handleClickDatepickerIcon（）}>

最佳解决方案！如果你的点击监听器需要在页面的另一个区域中，也可以看到fabio的答案，这正是我想要的+你的问题解决了吗？如果没有，我们可以进一步讨论。否则，如果我的答案帮助你，请考虑接受它作为正确的答案。完美的解决方案-这应该已经被标记为正确的答案，如果用这种方式，没有图标渲染（更新是可见的）每次你选择一个日期？

<label>
<DatePicker/> </label>

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


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

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

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

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>