bootstrap-datepicker實現年、月、日動態切換
阿新 • • 發佈:2019-02-20
效果圖:
bootstrap-datepicker使用時,無法動態重置年、月、日控制元件,網上搜索了半天沒有找到相應的方法,後來自己根據jquery的特性通過動態增刪日期控制元件,實現年、月、日的無縫動態切換。
1.新建tet.html
引入bootstrap3-datepicker.css、bootstrap-datepicker.js等檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>日期切換</title>
<link href="./bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="./css/test.css" rel="stylesheet" />
<script src="./js/jquery.min.js"></script>
<script src="./bootstrap/js/bootstrap.js"></script>
<link href="./datapicker/css/bootstrap-datepicker3.css" rel="stylesheet" >
<script src="./datapicker/js/bootstrap-datepicker.js"></script>
<script src="./datapicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script src="./js/test.js"></script>
</head>
<body>
<span class="dayTest">按天</span>
<span class ="monthTest">按月</span>
<span class="yearTest">按年</span>
<div class="form-group">
<label class="form-group-title">日期範圍</label>
<div class="input-group date">
<input name="startDate" class="form-control date-picker form-control-left">
<span class="input-group-addon"></span>
<input name="endDate" class="form-control date-picker form-control-right">
</div>
</div>
</body>
</html>
2.新建test.css
.dayTest {
margin-left: 20px;
text-align: center;
background-color: red;
width: 100px;
height: 50px;
font-size: 20px;
}
.monthTest {
text-align: center;
background-color: red;
width: 100px;
height: 50px;
font-size: 20px;
}
.yearTest {
text-align: center;
background-color: red;
width: 100px;
height: 50px;
font-size: 20px;
}
/*選擇日期範圍*/
.form-group {
margin-left: 20px;
margin-top: 0px;
z-index: 5;
}
.form-group-title {
float: left;
display: block;
z-index: 5;
height: 25px;
text-align: center;
line-height: 25px;
color: black;
}
.input-group {
float: left;
display: block;
width: 300px;
margin-left: 10px;
z-index: 5;
}
.input-group .form-control-left {
float: left;
display: block;
width: 100px;
height: 25px;
z-index: 5;
}
.input-group .input-group-addon {
float: left;
display: block;
width: 10px;
height: 25px;
z-index: 5;
}
.input-group .form-control-right {
float: left;
display: block;
width: 100px;
height: 25px;
margin-top: 0px;
z-index: 5;
}
3.新建test.js
$(document).ready(function () {
$('.date-picker').datepicker({
minView: "day", // 選擇時間時,最小可以選擇到那層;預設是‘hour’也可用0表示
language: 'zh-CN', // 語言
autoclose: true, // true:選擇時間後窗口自動關閉
format: 'yyyy-mm-dd', // 文字框時間格式,設定為0,最後時間格式為2017-03-23 17:00:00
todayBtn: true, // 如果此值為true 或 "linked",則在日期時間選擇器元件的底部顯示一個 "Today" 按鈕用以選擇當前日期。
// 視窗可選時間從今天開始
endDate: new Date()
});
$(".dayTest").click(function () {
$(".date-picker").remove();
$(".input-group-addon").remove();
var $leftInput = $('<input name="startDate" class="form-control date-picker form-control-left" style="float: left;display: block;width: 100px;height: 25px;z-index: 5;"/>');
$(".input-group").append($leftInput);
var $inputGroupAddon = $('<span class="input-group-addon" style="float: left;display: block;width: 10px;height: 25px;z-index: 5;"></span>');
$(".input-group").append($inputGroupAddon);
var $rightInput = $('<input name="endDate" class="form-control date-picker form-control-right" style="float: left;display: block;width: 100px;height: 25px;margin-top: 0px;z-index: 5;"/>');
$(".input-group").append($rightInput);
$('.date-picker').datepicker({
minView: "day", // 選擇時間時,最小可以選擇到那層;預設是‘hour’也可用0表示
language: 'zh-CN', // 語言
autoclose: true, // true:選擇時間後窗口自動關閉
format: 'yyyy-mm-dd', // 文字框時間格式,設定為0,最後時間格式為2017-03-23 17:00:00
todayBtn: true, // 如果此值為true 或 "linked",則在日期時間選擇器元件的底部顯示一個 "Today" 按鈕用以選擇當前日期。
// 視窗可選時間從今天開始
endDate: new Date()
});
});
$(".monthTest").click(function () {
$(".date-picker").remove();
$(".input-group-addon").remove();
var $leftInput = $('<input name="startDate" class="form-control date-picker form-control-left" style="float: left;display: block;width: 100px;height: 25px;z-index: 5;"/>');
$(".input-group").append($leftInput);
var $inputGroupAddon = $('<span class="input-group-addon" style="float: left;display: block;width: 10px;height: 25px;z-index: 5;"></span>');
$(".input-group").append($inputGroupAddon);
var $rightInput = $('<input name="endDate" class="form-control date-picker form-control-right" style="float: left;display: block;width: 100px;height: 25px;margin-top: 0px;z-index: 5;"/>');
$(".input-group").append($rightInput);
$('.date-picker').datepicker({
language: "zh-CN",
autoclose: true,
format: "yyyy-mm",
minViewMode: 1,
endDate: new Date()
});
});
$(".yearTest").click(function () {
$(".date-picker").remove();
$(".input-group-addon").remove();
var $leftInput = $('<input name="startDate" class="form-control date-picker form-control-left" style="float: left;display: block;width: 100px;height: 25px;z-index: 5;"/>');
$(".input-group").append($leftInput);
var $inputGroupAddon = $('<span class="input-group-addon" style="float: left;display: block;width: 10px;height: 25px;z-index: 5;"></span>');
$(".input-group").append($inputGroupAddon);
var $rightInput = $('<input name="endDate" class="form-control date-picker form-control-right" style="float: left;display: block;width: 100px;height: 25px;margin-top: 0px;z-index: 5;"/>');
$(".input-group").append($rightInput);
$(".date-picker").datepicker({
language: "zh-CN",
todayHighlight: true,
format: 'yyyy-mm',
autoclose: true,
startView: 'years',
maxViewMode:'years',
minViewMode:'years',
endDate: new Date()
});
});
})