bootstrap datetimepicker時間控件

bootstrap datetimepicker時間控件挺好用的  但是也挺難搞得，第一次接觸，搞了一下午，網上的文章都只能參考一下，有的都不能用....

1：先引入包

<!-- js -->
<script src="date/jquery-1.8.3.min.js"></script> 
<script src="date/bootstrap.min.js"></script>  
<script src="date/bootstrap-datetimepicker.min.js"></script>  
<script src="date/bootstrap-datetimepicker.zh-CN.js"></script> 
<!-- css -->
<link href="date/bootstrap.css" rel="stylesheet" />   
<link href="date/bootstrap-datetimepicker.min.css" rel="stylesheet" />  
<!-- 如果想使用時間方向圖標的話  需要引入圖標 -->

2：寫兩個input標簽

<input type="text" placeholder="開始時間" id="start"">
<input type="text" placeholder="結束時間" id="end">

:3：js　，並且添加開始時間不得大於結束時間，結束時間不得小於開始時間

<script type="text/javascript">
$(function(){
	$("#start").datetimepicker({
	    format:'yyyy-mm-dd hh:ii:ss',  //格式  如果只有yyyy-mm-dd那就是0000-00-00
	    autoclose:true,//選擇后是否自動關閉  
	    minView:0,//最精准的時間選擇為日期  0-分 1-時 2-日 3-月
	    language:  'zh-CN', //中文
	    weekStart: 1, //一周從星期幾開始
	    todayBtn:  1,
	    autoclose: 1,
	    todayHighlight: 1,
	    startView: 2,
	    forceParse: 0,
	   // daysOfWeekDisabled:"1,2,3", //一周的周幾不能選 格式為"1,2,3"  數組格式也行
	    todayBtn : true,  //在底部是否顯示今天
	    todayHighlight :false, //今天是否高亮顯示
	    keyboardNavigation:true, //方向圖標改變日期  必須要有img文件夾 里面存放圖標
	    showMeridian:false,  //是否出現 上下午
	    initialDate:new Date()
	  	//startDate: "2017-01-01" //日期開始時間 也可以是new Date()只能選擇以后的時間
	}).on("changeDate",function(){
		var start = $("#start").val();
        $("#end").datetimepicker("setStartDate",start);
    });  
	$("#end").datetimepicker({
	    format:'yyyy-mm-dd hh:ii:ss',  //格式  如果只有yyyy-mm-dd那就是0000-00-00
	    autoclose:true,//選擇后是否自動關閉  
	    minView:0,//最精准的時間選擇為日期  0-分 1-時 2-日 3-月
	    language:  'zh-CN', //中文
	    weekStart: 1, //一周從星期幾開始
	    todayBtn:  1,
	    autoclose: 1,
	    todayHighlight: 1,
	    startView: 2,
	    forceParse: 0,
	    //daysOfWeekDisabled:"1,2,3", //一周的周幾不能選
	    todayBtn : true,  //在底部是否顯示今天
	    todayHighlight :false, //今天是否高亮顯示
	    keyboardNavigation:true, //方向圖標改變日期  必須要有img文件夾 里面存放圖標
	    showMeridian:false  //是否出現 上下午
	   // startDate: "2017-01-01"  //開始時間  ENdDate 結束時間
	}).on("changeDate",function(){
		var end = $("#end").val();
        $("#start").datetimepicker("setEndDate",end);
    });    
});
</script>