React DatePicker, как открыть datepicker по щелчку значка

Question

Попытка открыть datepicker при щелчке значка компонента date-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

После добавления новой версии среагировать-DatePicker т.е. 0.30.0 я получил реквизит автофокус, но, опять же, я получил проблему, которая работала только в первый раз, то я попытался с помощью рефу, как показано ниже

refs='startDate' 

в DatePicker затем в этот объект я получил

this.refs.startDate.deferFocusInput(); 

Так я назвал его, и я получил дата-подборщика открыта по щелчку значка

Answer 2

Добавлено в версии 0.30.0, я думаю, что customInput prop позволит вам это сделать. Таким образом, вы можете создать свой собственный компонент ввода и прикрепить обработчик onClick к значку внутри него.

Answer 3

Я только что закончил, что, таким образом,

значок 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 4

Просто оберните DatePicker с этикеткой. Все щелчки внутри фокуса вызова метки на вкладке, чтобы открыть календарь.

<label> 
    <DatePicker/> 
</label>