bootstrap-datepicker 時間范圍選擇函數封裝
官網
https://bootstrap-datepicker.readthedocs.io/en/latest/index.html
需要引入的依賴包,發現還挺多的
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-datepicker/1.7.1/locales/bootstrap-datepicker.zh-CN.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css">
封裝的函數
/*
* name:時間范圍控件
* start:起始時間表單id值
* end:結束時間表單id值
*
*/
function dataTimeRange(start,end){//日期范圍
$('#'+start).datepicker({
todayBtn : "linked",
autoclose : true,
todayHighlight : true,
endDate : new Date(),
format:'yyyy-mm-dd',
language:'zh-CN'
}).on('changeDate',function(e){
var startTime = e.date;
$('#'+end).datepicker('setStartDate',startTime);
});
//結束時間
$('#'+end).datepicker({
todayBtn : "linked",
autoclose : true,
todayHighlight : true,
endDate : new Date(),
format:'yyyy-mm-dd',
language:'zh-CN'
}).on('changeDate',function(e){
var endTime = e.date;
$('#'+start).datepicker('setEndDate',endTime);
});
}
