1. 程式人生 > >bootstrap datetimepicker日期外掛超詳細使用方法介紹

bootstrap datetimepicker日期外掛超詳細使用方法介紹

首先在檔案頭部引入必要的檔案:

?

1

2

<link rel="stylesheet" href="Css/bootstrap-datetimepicker.min.css" rel="external nofollow" >

<script src="Js/bootstrap-datetimepicker.js"></script>

想用中文顯示,加入bootstrap-datetimepicker.zh-CN.js檔案

?

1

<script src=

"Js/bootstrap-datetimepicker.zh-CN.js"></script>

然後呼叫初始化日期外掛方法:

?

1

2

3

4

5

6

7

8

$('.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程式碼

?

1

2

3

<input size="16" type="text" id="datetimeStart" readonly class="form_datetime">

--

<input size="16" type="text" id="datetimeEnd" readonly class="form_datetime">

 js程式碼如下

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<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,只選擇年月;

?

1

2

3

4

5

6

7

8

9

10

11

<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'

});

 原文地址:https://www.jb51.net/article/106478.htm