我举了一个最小的例子来说明这个问题。我在此处阅读了有关SO的一些问题/答案,
onSelect: function() {
date_input.blur();
},
选择日期选择器,尽管这对我仍然无效。知道为什么吗?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="styles/custom.css">
<link id="bsdp-css" href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet">
<!-- jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Bootstrap Date-Picker Plugin -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<script type = "text/javascript">
<!--
function validate() {
if( document.invia_dati.nome.value == "" ) {
alert( "Please provide your name!" );
document.invia_dati.nome.focus() ;
return false;
}
}
function validate_field(field_id, error_id) {
var field = document.getElementById(field_id);
var perror = document.getElementById(error_id);
if (field.value === "") {
perror.style.display = "block";
field.style.borderColor = "red"
field.style.boxShadow = "1px 1px 5px red";
} else {
perror.style.display = "none";
field.style.borderColor = "LightGrey"
field.style.boxShadow = "0px 0px 0px LightGrey";
}
}
//-->
$(document).ready(function(){
var date_input=$('input[name="data_nascita"]'); //our date input has the name "data_nascita"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
orientation: "top",
onSelect: function() {
date_input.blur();
},
})
})
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<title>test</title>
</head>
<body>
<div class="container">
<form class="form-horizontal" name="invia_dati" onsubmit="return(validate());">
<fieldset>
<!-- Form Name -->
<legend>Invia Dati:</legend>
<div class="form-group">
<label class="col-md-4 control-label" for="data_nascita">Data di Nascita</label>
<div class="col-md-4 date">
<input class="form-control" id="date" name="data_nascita" placeholder="13/11/1995" type="text" onblur="return(validate_field('date', 'dob-errore'));">
<p id="dob-errore"> Questo campo non può essere vuotο</p>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="pob">Luogo di nascita</label>
<div class="col-md-4">
<input id="pob" name="pob" type="text" placeholder="i.e. Roma" class="form-control input-md" onblur="return(validate_field('pob', 'pob-errore'));">
<p id="pob-errore"> Questo campo non può essere vuotο</p>
</div>
</div>
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="binvio"></label>
<div class="col-md-8">
<button id="binvio" name="binvio" type="submit" class="btn btn-success">Invio</button>
<button id="bannulla" name="bannulla" type="reset" class="btn btn-inverse">Annulla</button>
</div>
</div>
</fieldset>
</form>
</body>
</html>
答案 0 :(得分:2)
如日期选择器事件文档中所述:https://bootstrap-datepicker.readthedocs.io/en/latest/events.html#changedate
您需要收听changeDate
事件!
<!--
function validate() {
if (document.invia_dati.nome.value == "") {
alert("Please provide your name!");
document.invia_dati.nome.focus();
return false;
}
}
function validate_field(field_id, error_id) {
var field = document.getElementById(field_id);
var perror = document.getElementById(error_id);
if (field.value === "") {
perror.style.display = "block";
field.style.borderColor = "red"
field.style.boxShadow = "1px 1px 5px red";
} else {
perror.style.display = "none";
field.style.borderColor = "LightGrey"
field.style.boxShadow = "0px 0px 0px LightGrey";
}
}
//-->
$(document).ready(function() {
var date_input = $('input[name="data_nascita"]'); //our date input has the name "data_nascita"
var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
orientation: "top"
})
date_input.on('changeDate', function(e) {
date_input.blur()
})
})
https://bootstrap-datepicker.readthedocs.io/en/latest/events.html#changedate
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="styles/custom.css">
<link id="bsdp-css" href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet">
<!-- jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Bootstrap Date-Picker Plugin -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />
<title>test</title>
</head>
<body>
<div class="container">
<form class="form-horizontal" name="invia_dati" onsubmit="return(validate());">
<fieldset>
<!-- Form Name -->
<legend>Invia Dati:</legend>
<div class="form-group">
<label class="col-md-4 control-label" for="data_nascita">Data di Nascita</label>
<div class="col-md-4 date">
<input class="form-control" id="date" name="data_nascita" placeholder="13/11/1995" type="text" onblur="return(validate_field('date', 'dob-errore'));">
<p id="dob-errore"> Questo campo non può essere vuotο</p>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="pob">Luogo di nascita</label>
<div class="col-md-4">
<input id="pob" name="pob" type="text" placeholder="i.e. Roma" class="form-control input-md" onblur="return(validate_field('pob', 'pob-errore'));">
<p id="pob-errore"> Questo campo non può essere vuotο</p>
</div>
</div>
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="binvio"></label>
<div class="col-md-8">
<button id="binvio" name="binvio" type="submit" class="btn btn-success">Invio</button>
<button id="bannulla" name="bannulla" type="reset" class="btn btn-inverse">Annulla</button>
</div>
</div>
</fieldset>
</form>
</body>
</html>
答案 1 :(得分:1)
您可以通过以下方式更改此事件
onblur="return(validate_field('date', 'dob-errore'));"
致onchange="return(validate_field('date', 'dob-errore'));"
也许您的问题只与日期选择器有关?