datetimepicker —— 日期選擇控件

一、依賴

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>

 

 

二、初始化

// html
<input type="text" class="form-control time5" placeholder="年月日">   // 這里要加類名form-control，要不然控件中頂部左右側箭頭會不見

// js
$('.time1').datetimepicker({
    // 這里寫各個屬性
})

 

三、屬性

1、format —— 時間格式

類型：string

默認值： "yyyy-mm-dd hh-ii"

比如我只想要一個可以選擇年月日的時間控件。

format: 'yyyy-mm-dd'

根據下面的值，可以自由的定義。

符號	意義
p	12小時制且小寫(‘am’ or ‘pm’)
P	12小時制且大寫(‘AM’ or ‘PM’)
s	秒，前面不補0
ss	秒，前面補0
i	分，前面不補0
ii	分，前面補0
h	時，24小時制，前面不補0
hh	時，24小時制，前面補0
H	時，12小時制，前面不補0
HH	時，12小時制，前面補0
d	日，前面不補0
dd	日，前面補0
m	月，數字表示，前面不補0 如：4
mm	月，數字表示，前面補0 如：04
M	月，縮寫表示，前面補0 如：Apr
MM	月，全稱表示，前面補0 如：April
yy	年，后兩位 如：16
yyyy	年，全部 如：2016

 

2、language —— 語言

類型：string

默認值：'en'

要使用中文的話，

// 先在公共js里擴展下
$.fn.datetimepicker.dates['zh'] = {
    days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
    daysShort: ["日", "一", "二", "三", "四", "五", "六", "日"],
    daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
    months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    meridiem: ["上午", "下午"],
    today: "今天"
};

// 后使用
$('.time1').datetimepicker({
    language: 'zh',
    format: 'yyyy-mm-dd'
})

 

3、startView —— 首先出現的視圖

日期時間選擇器打開之后首先顯示的視圖。

類型：Number

默認值： 2

可接受的值：

值	意義
0	首先出現選分鍾界面
1	首先出現選小時界面
2	首先出現選天界面
3	首先出現選月界面
4	首先出現選年界面

 

4、minView —— 最精准的時間

日期時間選擇器所能夠提供的最精確的時間選擇視圖。

類型：Number

默認值：0

可接受的值：

值	意義
0	可選到分
1	可選到小時
2	可選到天
3	可選到月
4	可選到年

 

5、todayBtn —— 今天按鈕

一個快捷按鈕，可以直接選擇到今天的日期

類型：Boolean

默認值： false

todayBtn: true

 

6、autoclose —— 是否自動關閉

選完時間后是否自動關閉時間控件。

類型：Boolean

默認值：false

autoclose: true

 

7、minuteStep —— 步進值

默認分鍾是以5分鍾為單位，就是可以選0分、5分、10分...，可以更改這個屬性選擇到以每分鍾為單位。

類型： Number

默認值：5

minuteStep: 1

 

還有好多屬性啊，但我覺得平時可能用不到，最后附上幾個實際的例子、分別是選擇年月日、年月、年、月、日。鏈接：https://pan.baidu.com/s/1pWEcw6Jy3cYdYPgbykh_pw。