bootstrap-datepicker 時間范圍選擇函數封裝


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);
		});
	}                

  

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM