Bootbox + JQuery UI Datepicker time input box hace clic sin respuesta

Al usar Bootbox + JQuery datepicker, descubrí que hacer clic en el cuadro de entrada no estaba cubierto por la capa div, pero el evento de visualización de la fecha no se activó en absoluto y no había ningún mensaje de error.
La situación es la siguiente: 1.
código html:
esta es nuestra capa emergente.

    <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.Código JS:
use bootbox para personalizar la información de la capa emergente, aquí está este formulario

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. La interfaz, como se muestra en la figura:
encontramos que al hacer clic en el cuadro de entrada debajo de user_birthday, no hay respuesta en absoluto.

Después de buscar información, encontré una solución a un problema similar:
haga clic aquí
para modificar sobre esta base, y el problema se resolverá más adelante.

El método es el siguiente:
1. Código 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. Resultado: puede ver que el período de tiempo aparece después de hacer clic.

Supongo que te gusta

Origin blog.csdn.net/u010857795/article/details/71512042
Recomendado
Clasificación