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.