With its beautiful appearance and rich components, bootstrap makes it the most popular front-end framework at present. In project development, we did run into some problems with the date control using it:
1. Clicking on the two icons behind the date control triggers invalidation
2. Double date association issue
3. When the double date is cleared, the previous input date association is still valid
4. Enter year and month
5. The icon is not displayed (this can be solved by searching for the URL address in the file where the icon is introduced)
The following codes will be solved one by one.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="" rel="external nofollow" type="text/css" />
<link rel="stylesheet" href="" rel="external nofollow" type="text/css" />
<script src="jquery-1.11." type="text/javascript"></script>
<script src="" type="text/javascript" ></script>
<script src="" type="text/javascript" ></script>
<script src="" type="text/javascript" ></script>
<title>bootstrapdate</title>
<style>
</style>
<script type="text/javascript">
$(function(){
//Enter start date and end date //Locate the id on the div, not the id on the input, otherwise the next two small icons will be invalid $("#startdiv").datetimepicker({
pickerPosition : "bottom-left",
language : 'zh-CN',
format : "yyyy-mm-dd",
weekStart : 1,
todayBtn : 1,
autoclose : 1,
todayHighlight : 1,
startView : 2,
minView : 2,
forceParse : 0
});
$("#endDiv").datetimepicker({
pickerPosition : "bottom-left",
language : 'zh-CN',
format : "yyyy-mm-dd",
weekStart : 1,
todayBtn : 1,
autoclose : 1,
todayHighlight : 1,
startView : 2,
minView : 2,
forceParse : 0
});
//Enter year and month $("#birthMonth").datetimepicker({
language: 'zh-CN',
format: 'yyyy-mm',
autoclose: true,
// todayBtn: true, today's prompt startView: 'year',
minView:'year',
maxView:'decade'
});
$('#startdiv').unbind("change");
$('#startdiv').change(function(){
$('#endDiv').datetimepicker('setStartDate', $("#start").val());
});
$('#endDiv').unbind("change");
$('#endDiv').change(function(){
$('#startdiv').datetimepicker('setEndDate', $("#end").val());
});
});
function clearForm(){
$('#start').val('');
$('#end').val('');
//Used to solve the problem that the previous and next dates will be related after clearing $('.input-group-addon:has(-remove)').click();
}
</script>
</head>
<body>
<h1>bootstrapdate控件</h1>
<hr/>
<div class="input-group date width100">
<input
name="start" class="form-control" type="text"
value="" placeholder="Please enter the start date" readonly="readonly"> <span
class="input-group-addon"> <span
class="glyphicon glyphicon-remove"></span>
</span> <span class="input-group-addon"> <span
class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<br>
<div class="input-group date width100">
<input
name="end" class="form-control" type="text"
value="" placeholder="Please enter the end date" readonly="readonly"> <span
class="input-group-addon"> <span
class="glyphicon glyphicon-remove"></span>
</span> <span class="input-group-addon"> <span
class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<br>
<button type="button" class="btn btn-sm btn-warning" onclick="clearForm()">Clear</button>
<hr>
<div class="input-group date width100">
<input
name="birthDay" class="form-control" type="text"
value="" placeholder="Please enter the date of birth" readonly="readonly"> <span
class="input-group-addon"> <span
class="glyphicon glyphicon-remove"></span>
</span> <span class="input-group-addon"> <span
class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</body>
</html>
The above is the bootstrap date control problem introduced to you by the editor (double date, clearing and other problems). I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!