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>

转载于:https://www.cnblogs.com/chenlizhi/p/7737790.html