Reagieren DatePicker, wie datepicker öffnen auf Klick auf icon

Habe ich gerade beendet, dass durch die Art und Weise,

svg-Symbol importiert wurde von webpack

    import IconCalendar from 'IconCalendar';

die render-Funktion in der Haupt-Komponente

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

Sekundäre Komponente, die macht-input-Feld und Symbol

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

endlich css hat mir geholfen, auf das Symbol Anzeige auf der Eingabe-Feld

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

Wenn Sie wollen programmgesteuert öffnen Sie das datepicker-oder wenn Sie einfach nicht wollen, zu einem <label> wrapper können Sie eine ref die datepicker-Komponente und verwenden setOpen(bool) um es zu öffnen. Beachten Sie, dass seit wir mit Hilfe der refs, die Komponente sollte stateful.

Beispiel:

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


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

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

Gibt es derzeit eine offene Frage auf der datepicker ist Github, die besagt, dass das fehlen der Dokumentation.

@Jayant Patil, das ist mir gelungen die Funktionalität der Eröffnung reagieren-datepicker - auf Klick auf ein Symbol.

Dies ist, wie ich es Tat.

1. Habe ich eine wrapper-Komponente um den Datum-picker und übergeben einer id als Requisiten, um es.

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;

1. Schließen Sie Ihr Symbol mit einem label und dann übergeben die id.

        <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' />

Funktioniert dies ohne Beeinträchtigung der Funktionalität im Gegensatz zu, wenn nur umschließt das Symbol mit Etikett wie sagte @tre

<label>
<DatePicker/> </label>

bewirkt, dass die Kalender werden in offen-und geschlossen werden können wir nur, wenn wir auf eine Stelle außerhalb des Kalenders.