本文實例為大家分享了bootstrap datetimepicker日期插件的簡單使用，供大家參考，具體內容如下
首先在文件頭部引入必要的文件：
<link rel="stylesheet" href="Css/bootstrap-datetimepicker.min.css" rel="external nofollow" ><script src="Js/bootstrap-datetimepicker.js"></script>
想用中文顯示，加入bootstrap-datetimepicker.zh-CN.js文件
<script src="Js/bootstrap-datetimepicker.zh-CN.js"></script>
然后調用初始化日期插件方法：
$('.date').datetimepicker({ language: 'zh-CN',//顯示中文 format: 'yyyy-mm-dd',//顯示格式 minView: "month",//設置只顯示到月份 initialDate: new Date(),//初始化當前日期 autoclose: true,//選中自動關閉 todayBtn: true//顯示今日按鈕 })引入控件
使用bootstrap的日期控件需要單獨引入bootstrap-datetimepicker.min.css和bootstrap-datetimepicker.min.js
詳情及文件可以通過下面地址下載：http://www.bootcss.com/p/bootstrap-datetimepicker/
使用場景
單獨引入一個日期控件可以參考上面提供的連接地址上的案例。此處介紹的是怎么使用兩個日期控件，一個為開始日期，另外一個為結束日期，兩個日期之間建立相互約束關系。即開始日期不能大于結束日期，結束日期不能小于開始日期。
使用方法
兩個時間輸入域如圖：
html代碼
<input size="16" type="text" id="datetimeStart" readonly class="form_datetime">--<input size="16" type="text" id="datetimeEnd" readonly class="form_datetime">
js代碼如下
<script type="text/javascript"> $("#datetimeStart").datetimepicker({ format: 'yyyy-mm-dd', minView:'month', language: 'zh-CN', autoclose:true, startDate:new Date() }).on("click",function(){ $("#datetimeStart").datetimepicker("setEndDate",$("#datetimeEnd").val()) }); $("#datetimeEnd").datetimepicker({ format: 'yyyy-mm-dd', minView:'month', language: 'zh-CN', autoclose:true, startDate:new Date() }).on("click",function(){ $("#datetimeEnd").datetimepicker("setStartDate",$("#datetimeStart".val())) });</script>關于bootstrap插件datepicker，只選擇年月;
<input type="text"class="form-control form_datetime_2"readonly id="month_time"value=""/>$(".form_datetime_2").datetimepicker({language: 'zh-CN',format: 'yyyy-mm',autoclose: true,todayBtn: true,startView: 'year',minView:'year',maxView:'decade'});以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
