reactjs - react-bootstrap-datetimerangepicker：没有文本输入字段

问题描述

我正在尝试使用 react-bootstrap-datetimerangepicker，并且在在线演示（http://luqin.xyz/react-bootstrap-datetimerangepicker/#/）中似乎在打开的菜单顶部有一个文本输入字段点击。

在我的实现中，没有出现该文本输入框。

我想知道我是否错误地导入了 .css？但是我复制了示例的源代码，我仍然得到这个结果。

import 'bootstrap/dist/css/bootstrap.css';
import DatetimeRangePicker from 'react-bootstrap-datetimerangepicker';
import 'bootstrap-daterangepicker/daterangepicker.css';

class Sidebar extends Component{
constructor(props) {
    super(props);
    this.state = {
      fromDate: new Date(),
      toDate: new Date(),
    };
 }
 handleApply(event, picker) {
    this.setState({
      fromDate: picker.startDate.format('YYYY-MM-DD HH:mm:ss'),
      toDate: picker.endDate.format('YYYY-MM-DD HH:mm:ss'),
    });
 }
 render(){
    return(
         <DatetimeRangePicker
              timePicker={true}
              timePicker24Hour={true}
              timePickerSeconds={true}
              showDropdowns={true}
              onApply={this.handleApply}
              opens={"center"}
              startDate={this.state.fromDate}
              endDate={this.state.toDate}>

               <Button >
                Date and Time Range
               </Button>}

         </DatetimeRangePicker>
  )
}
}

标签： reactjsbootstrap-daterangepicker

所以正如我推测的那样，这与我使用的版本有关。

如此处所述： https ://github.com/skratchdot/react-bootstrap-daterangepicker/issues/185

我通过运行 npm i --save bootstrap-daterangepicker@2.1.27 切换了我的版本，现在它使用手动文本输入选择器回到旧版本

reactjs - react-bootstrap-datetimerangepicker：没有文本输入字段

问题描述

解决方案

推荐阅读