自定义div容器作为popperContainer

时间:2019-01-30 16:10:16

标签: reactjs react-datepicker

首先,我是ReactJS的新手,对不起我的英语!

我对react-datepicker组件有问题。我想在DatePicker组件之后打开在render方法中创建的dom元素中的日历。

我尝试使用popperContainer属性,但是没有找到一种使其按我想要的方式工作(使用Portal解决方案找到了一些答案,但我不想在外部DOM元素中使用它)

这是我的代码的一部分:

return ( 
        <div>
            <form onSubmit={this.handleSubmit.bind(this)}>
                <select value={this.state.periode} onChange={this.handlePeriode.bind(this)}>
                    {
                        this.periodeData.map( (periode) => {
                            return <option value={periode.value}>{periode.name}</option>
                        })
                    }
                </select>

                <DatePicker
                    selected={this.state.startDate}
                    selectsStart
                    locale= 'fr'
                    dateFormat="dd/MM/yyyy"
                    minDate= {this.minDate}
                    maxDate={this.maxDate}
                    startDate={this.state.startDate}
                    endDate={this.state.endDate}
                    onChange={this.handleChangeStart}
                />

                <DatePicker
                    selected={this.state.endDate}
                    selectsEnd
                    locale= 'fr'
                    dateFormat="dd/MM/yyyy"
                    minDate= {this.minDate}
                    maxDate={this.maxDate}
                    startDate={this.state.startDate}
                    endDate={this.state.endDate}
                    onChange={this.handleChangeEnd}
                />

                <div>/* THE PLACE TO THE CALENDARS */</div>

                <input type="submit" value="Valider" />
            </form>
        </div>
     );

如果有人有想法,他会受到欢迎吗?

谢谢

0 个答案:

没有答案