准備動作先到下載Bootstrap日期和時間組件。
1：引入bootstrap.min.css，因為bootstrap-datetimepicker里面的很多樣式依賴bootstarp的主樣式，字體文件。
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
2：引入jq庫，因為bootstarp基於jq.
<script type="text/javascript" src="jquery/jquery-1.11.1.min.js" charset="UTF-8"></script>
3.引入bootstrap.min.js腳本
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
基本准備就緒，現在開始引入Bootstrap日期和時間表單組件相關文件。
4：引入日期主樣式文件bootstrap-datetimepicker.min.css。
<link href="data/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
5：引入日期腳本bootstrap-datetimepicker.js。
<script type="text/javascript" src="data/bootstrap-datetimepicker.js" charset="UTF-8"></script>
6：引入日期翻譯bootstrap-datetimepicker.zh-CN.js腳本，這里選擇的是中文默認為英文。其他語言在locales文件中。
<script type="text/javascript" src="data/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
相關文件引入就緒，現在開始用日期組件。
7：HTML中指定要運用日期組件的標簽
<input class="form-control" type="text" id="datetimepicker">
8：選項
初始化，要放在引入腳本的下面。默認選擇值2014-12-30 13:15 ，日期--小時--分
<script type="text/javascript">
$('#datetimepicker').datetimepicker({
language: 'zh-CN',
autoclose: 1,
// format:'yyyy:MM:dd',
// weekStart: 5,
// startDate:'2014:12:15'，
// endDate:'2014:12:28',
// startView: 1,
// minView: 2,
// todayBtn:1，
// todayHighlight:1,
// keyboardNavigation:1,
// minuteStep:6,
// showMeridian: 1，
// forceParse: 0
});
</script>
language（設置控件顯示語言）:
'zh-CN'：日期組件的語言為中文；
autoclose（這只選擇時間后自動關閉組件）：
默認或值為0選擇值后都不自動關閉需要點擊組件外圍關閉組件。1=TRUE；0=FALSE；
format（設置日期格式）:
'yyyy:MM:dd':指定顯示日期格式 中文默認 yy-MM-dd hh:ii,格式， p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 的任意組合。默認情況下年月日時分全部顯示就是通過下面的規則設定也會去當前默認值，這時需要 format來設定自己需要的顯示的時間比如我只想要 月和日則可以可設定format:'MM:dd',
weekStart（設置每周從星期幾開始）:
5， 視圖選擇的一周從星期幾開始算起，0周日 1到6周一到周六，默認周日
startDate（設定不在范圍前的時間禁用）:
這個值要設置的，不然時間就從1899開始的。
'2014:12:15'：設定不在范圍內的禁用。指定一個最早可以選擇的時間，指定時間之后的可以選擇，指定時間之前的將禁用。注意，設置的時間格式要和前面的或者默認的一致。 startDate: '-3d',取當前值以上3個外的之前不能選擇。startDate: '-0d',當前日期以前的禁用。
endDate（不在范圍后的時間禁用）:
'2014:12:28':設定不在范圍內的禁用。指定一個最晚可以選擇的時間，指定時間之前的可以選擇，指定時間之后的禁用。注意，設置的時間格式要和前面的或者默認的一致。 endDate: '+0d',當前日期以后的禁用。
startView（控件打開從那個時間段開始）:
1,日期選擇器打開后從什么視圖開始選擇，值為0到4。0為一個小時60分鍾，1為一天24個小時，2為一月30日，3為一年12個月，4當前年份的前后年。0為直接選擇分鍾其他默認，1選擇小時到分，2：選擇日小時分鍾，3：選擇月日小時分鍾，4：選擇年月日時分。默認為2”月“。概括：0：分鍾開始，1：小時，2：日，3：月，4：年
minView（最少顯示多小個時間段）:
2：日期選擇器過濾倒數幾個可選擇視圖，沒有設置startView（默認為2）的時候，2倒數兩個不可選擇，1倒數一個不可選擇，0全部可選擇，若設定了startView（年月日時分開始），比如設定startView：4；則0從startView選擇到尾，1倒數第一個不能選擇即分鍾不能選擇采用默認的，2倒數兩個不能選擇即時分不能選擇，3倒數3個不能選擇即日時分不能選擇，4:倒數四個不能選擇即月日時分不能選擇，不能選擇都的用默認值。概括：0全部可選，1倒數一個，2倒數兩個，3倒數3個，N倒數n個。minView選擇的值<=startView所設定的值，>startView都當=的作用也就是都只能選擇一個。
todayBtn（是否出現當前時間按鈕）:
1，提供當天時間按鈕供點擊1=TRUE，默認0=FALSE。管網說如果是"linked"，當天日期將會被選中，但是我這里用了效果和設置為1的一致。
todayHighlight（當前時間高亮）:
1,1=TRUE當你選擇一個日期后再次點擊出現視圖會高亮顯示當前時間和你選擇的時間，默認為FALSE，只高亮你選擇了的時間。
keyboardNavigation（是否可以通過鍵盆選擇時間）:
1，1=TRUE，是否允許通過鍵盤方向鍵和回車鍵來進行時間的選擇，默認為TRUE。
minuteStep（分鍾間隔）:
6,默認為5，設置分鍾的間隔，默認為每5分鍾間隔一次。
showMeridian（上下午有線分隔）:
1 ，1=true，是否顯示划分上午或下午。
forceParse（糾正用戶輸入錯誤）:
0：當用戶輸入有錯誤的時間值時，組件會自動解析更正日期，並將解析后的正確值按照給定的格式format設置到輸入框中。
最后說明下這種情況：
出現 中文的七，這里想要數字，請打開翻譯文件bootstrap-datetimepicker.zh-CN.js
這是之前直接引用的翻譯文件，現在來修改下。
months：視圖中的月份顯示；
monthsShort：選擇后input中的月份顯示；
修改后
;(function($){
$.fn.datetimepicker.dates['zh-CN'] = {
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
months: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
monthsShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
today: "今天",
suffix: [],
meridiem: ["上午", "下午"]
};
}(jQuery));
效果
綜上：比如我現在只設置一個只能給人選擇月份和日期並且在input中也只顯示月份和日期的
<script type="text/javascript">
$('#datetimepicker').datetimepicker({
language: 'zh-CN',
autoclose: 1,
format:'MM:dd',
startView: 3,
minView:2,
});
</script>
結果
9：常用方法：
$('#datetimepicker').datetimepicker('remove')：移除日期組件和相關綁定事件。
$('#datetimepicker').datetimepicker('show')“顯示日期組件。
10：常用事件：
<script type="text/javascript">
$('#datetimepicker').datetimepicker()
.on('changeDate', function(ev){
alert(888)
});
</script>
changeDate：每次日期被改變的時候觸發。
<script type="text/javascript">
$('#datetimepicker').datetimepicker()
.on('show', function(ev){
alert(888)
});
</script>
'show'：當日期視圖第一次出現的時候觸發。
<script type="text/javascript">
$('#datetimepicker').datetimepicker()
.on(hide, function(ev){
alert(888)
});
</script>
'hide'：當日期視圖隱藏的時候觸發。
outOfRange
當用戶選擇的日期超出startDate 或endDate 時，或者通過setDate 或 setUTCDate方法設置日期超出范圍時被觸發。
值得一提的是，用戶選擇的時間日期存儲在input的value中，想要獲取只要$(”#yourinput”).val()就可以了
關於bootstrap-datetimepicker.js不支持IE8的解決辦法
直接用官網上的下載的控件，在IE8下面是沒有效果的，提示的腳本錯誤是說bootstrap-datetimepicker.js腳本里不支持indexOf()這個方法。
我的解決方法是在bootstrap-datetimepicker.js的前面加上以下代碼：
（在使用indexOf方法前，執行一下下面的js, 原理就是如果發現數組沒有indexOf方法，會添加上這個方法。）
if (!Array.prototype.indexOf)
{
Array.prototype.indexOf = function(elt /*, from*/)
{
var len = this.length >>> 0;
var from = Number(arguments[1]) || 0;
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len;
for (; from < len; from++)
{
if (from in this &&
this[from] === elt)
return from;
}
return -1;
};
}
插入位置效果圖
推薦資源：
參考文獻
http://www.bootcss.com/p/bootstrap-datetimepicker/
http://bootstrap-datepicker.readthedocs.org/en/release/