bootstrap datetimepicker日期插件超詳細使用方法

本文實例為大家分享了bootstrap datetimepicker日期插件的簡單使用，供大家參考，具體內容如下

首先在文件頭部引入必要的文件：

<link rel="stylesheet" href="Css/bootstrap-datetimepicker.min.css">
<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'
});