Question

我过去使用过bootstrap-datepicker，它可以选择让月历保持静态（内联），如here所示。

我现在正在使用React（并且我很擅长），并且需要再次使用日期选择器。我决定使用react-bootstrap-date-picker但是react-bootstrap-datepicker没有内联选项。

我不想深入入侵react-bootstrap-datepicker的css，加载一个jQuery依赖库如bootstrap-datepicker的最佳方法是什么？这会是不好的做法吗？

这是用于加载bootstrap-datepicker模块的JS（jQuery）/ HTML代码。

<div id="datepicker" data-date="12/03/2012"></div>
<input type="hidden" id="my_hidden_input">

$('#datepicker').datepicker();

$('#datepicker').on('changeDate', function() {

    $('#my_hidden_input').val(
        $('#datepicker').datepicker('getFormattedDate')
    );

});

更新：

因此，虽然这在渲染引导日历方面做了很多工作，但是当＃my_hidden_input的值已更新时，我无法触发事件。我添加了一个onChange事件来检测render（）函数中div的值更改。

<div id="datepicker"></div> 

    <div id="#my_hidden_input" onChange={this.handleDate}>

</div>

其中handleDate（）函数只是触发console.log（1）;

Answer 1

＆＃34; React＆＃34;初始化jQuery插件的方法是在componentDidMount生命周期方法中执行此操作。

componentDidMount(){
    $('#datepicker').datepicker();

    $('#datepicker').on('changeDate', function() {

        $('#my_hidden_input').val(
            $('#datepicker').datepicker('getFormattedDate')
        );

    });
}

更新：添加@klaasman关于销毁或卸载插件的内容。使用componentWillUnmount生命周期方法：

componentWillUnmount(){
    $('#datepicker').destroy();
}

更新2： onChange事件未被触发，因为您没有将事件设置为调用handleDate功能。在这里，您将change事件设置为匿名函数：

$('#datepicker').on('changeDate', function() {

    $('#my_hidden_input').val(
        $('#datepicker').datepicker('getFormattedDate')
    );

});

相反，您需要提供handleDate功能，如下所示：

$('#datepicker').on('changeDate', this.handleDate);

加载jquery依赖库反应

1 个答案: