Bootbox+JQuery UI Datepicker 时间输入框点击无响应

在使用Bootbox+JQuery datepicker时，发现点击输入框，并不是被div层遮住了，而是根本就没有触发这个显示日期的事件，且无错误提示信息。
情况是这样的：
1.html代码：
这个也就是我们的弹出层。

    <div id="formDiv" class="form-group form">
        <form id="addForm" class="cmxform">
            <div class="form-table">
                <div class="form-row">
                    <label>user_name</label> <input id="username" name="username"
                        type="text" class="form-control form-input" placeholder="name" />
                </div>
                <div class="form-row">
                    <label>user_gender</label> <input id="male" type="radio"
                        value="male" name="userGender" required>male <input
                        id="female" type="radio" value="female" name="userGender">female
                        <label for="userGender" class="error"></label>
                </div>
                <div class="form-row">
                    <label>user_email</label> <input id="userEmail" name="userEmail"
                        type="email" class="form-control form-input"
                        placeholder="user_email" />
                </div>
                <div class="form-row">
                    <label>user_phone</label> <input id="userPhone" name="userPhone"
                        type="text" class="form-control form-input"
                        placeholder="user_phone" />
                </div>
                <div class="form-row">
                    <label>user_address</label> <input id="userAddress"
                        name="userAddress" type="text" class="form-control form-input"
                        placeholder="user_address" />
                </div>
                <div class="form-row">
                    <label>user_birthday</label> <input name="userBirthday" type="text"
                        class="form-control datepicker" />
                </div>
                <div class="form-row">
                    <label>role_name</label> <select class="form-control form-select"
                        id="roleName">
                        <option value="1">总经理</option>
                        <option value="2">副总经理</option>
                        <option value="3">组长</option>
                        <option value="4">普通员工</option>
                    </select>
                </div>
                <div class="form-row">
                    <label>departemnt_name</label> <select
                        class="form-control form-select" id="departemntName">
                        <option value="1">研发</option>
                        <option value="2">IT部</option>
                        <option value="3">HR</option>
                        <option value="4">销售</option>
                    </select>
                </div>
            </div>
        </form>
    </div>

2.JS代码：
使用bootbox，自定义弹出层的信息，这里就是这个form

function addUser() {
    
    
    bootbox.confirm({
        message:$("#formDiv").html(),
        title:"Add new user",
        buttons:{
            confirm:{label:"Yes"},
            cancel:{label:"No"}
        },
        callback:function(result){
    
    
            if(result) {
            console.log("You have clicked yes");
            }
        }
});
}

3.界面，如图所示：
我们发现点击user_birthday下面的输入框，根本没有反应。

后面经过查询资料，发现一个类似问题的解决方案：
点击这里
在此基础上修改，后面就解决了这个问题。

方法如下:
1.JS代码：

function addUser() {
    
    
    bootbox.confirm({
        message:bootBoxContent(),
        title:"Add new user",
        buttons:{
            confirm:{label:"Yes"},
            cancel:{label:"No"}
        },
        callback:function(result){
    
    
            if(result) {
            console.log("You have clicked yes");
            }
        }
});
}

//添加这个方法取代$("#formDiv").html()
function bootBoxContent() {
    
    
    var content = $("#formDiv").clone();
    //因为在css代码做了隐藏，这里需要显示出来
    $(content).show();
    //不能使用id选择器，因为clone的原因，会出现2个相同的id，导致datepicker插件不识别报错，所以用类选择器
    content.find(".datepicker").datepicker();
    return content;
}

2.结果：可以看到点击之后能够出现时间框了。