React DatePickerアイコンをクリックしてdatepickerを開く方法

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

反応し、日付ピッカーすなわち0.30.0の新しいバージョンを追加した後、私は再び私は、最初の時間のために働いた問題私は、日付ピッカーで

refs='startDate' 

以下のようにREFを使用してみましたを持って、小道具のオートフォーカスを得たが、私はそれを呼ばれると私は、アイコン、バージョン0.30.0で追加されました

Answer 2

のクリックでオープン日付ピッカーを持って、このオブジェクト私は

this.refs.startDate.deferFocusInput(); 

だから、私はcustomInput propを考えてしまいましたあなたはこれを行うことができます。こうすることで、独自の入力コンポーネントを作成し、その中のアイコンにonClickハンドラをアタッチすることができます。

Answer 3

私は、入力フィールドをレンダリングするセカンダリコンポーネントは

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

その方法によって、

SVGアイコンが主成分でWebPACKの

import IconCalendar from 'IconCalendar'; 

レンダリング機能によってインポートされたことだけで終了しましたアイコン

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

をアイコンを表示するために私を助けました。すべてのラベル内のコールをクリックすると、開いているカレンダーの入力がフォーカスされます。

<label> 
    <DatePicker/> 
</label>