【bootstrap-datetimepicker】
datetimepicker是一個比較方便的日期時間插件。有了這個之后，我們可以在類似於表單的地方提供一個友好的日期（時間）輸入功能。官方文檔：【http://www.bootcss.com/p/bootstrap-datetimepicker/】
要使用datetimepicker組件，首先引入一些文件：
<link href="{% static 'bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet"> <script src="{% static 'bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js' %}"></script> <script src="{% static 'bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js' %}"></script>
同樣這里沒有寫出來bootstrap的css和js以及jquery，但都是也要包含的。
■ 典型應用：
HTML寫成這樣：
<div class="input-group date"> <input type="text" class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div>
然后在js中這樣寫：
var today = new Date(); var format_td = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate(); $('.input-group.date').datetimepicker({ format: 'yyyy-mm-dd hh:00', language: 'zh-CN', todayBtn: 'linked', maxView: 3, minView: 1, autoClose: true, minuteStep: 30, startDate: format_td, pickerPosition: 'bottom-right' });
我們就可以在頁面上得到一個輸入框（type還是text的，不是date或者datetime），然后這個輸入框右邊會帶有一個日歷圖標（input-group-addon），然后點擊輸入框或日歷時會跳出一個日歷來供用戶選擇具體的日期時間。選擇完成后輸入框中會出現特定格式的時間字符串，供表單提取數據或其他用。
下面來解釋一下在這個初始化過程中，各個參數的含義：
format 指出了最后在輸入框中的字符串的樣式，上面這個yyyy-mm-dd hh都是格式化字符串，對應於類似"2017-01-01 08"（2017年1月1日上午8時）這樣子。而:00是我固定寫死的。更多的還有hh:ii:ss表示精確到秒的時間格式等，至於兩位年份，一位小時數等等可以去官方文檔看格式化字符串的寫法。
language 國際化顯示適應，需要引入bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js才可順利顯示中文。
todayBtn 可以設置為true,false或者'linked'。讓日歷組件下方有一個“今天”按鈕。說是“今天”，其實應該是“現在”，如果是true則點擊后跳轉到當前日期；如果是'linked'則點擊時自動選中當前時間日期並且寫入輸入框
maxView,minView 日歷組件可以根據需要分成好多不同的維度來看，這兩個參數用來控制用戶能夠到達的最宏觀和最微觀的維度。值的各個數字的含義是：0-小時；1-天；2-月；3-年；4-十年。其默認值分別是0和4。另外還有startView參數用來指出點擊調用日歷控件時默認顯示的維度。默認值是2
autoClose 當選擇一個日期后關閉此日歷控件
minuteStep 控制分鍾選擇的粒度。在時間下面，我們還可以選擇具體到多少分鍾。比如點擊14:00，這個值是30的話，我們能夠點擊14:00和14:30
startDate,endDate 分別指出該日歷能夠選擇的最早和最晚日期。從上面的代碼中也可以看出來其取值是個yyyy-mm-dd格式的字符串。實際上也可以是個Date對象，也就是說這里寫new Date()也完全可以。另外提一下，Date對象getMonth的值是從0開始到11的，getFullYear才是獲取4位數年份的方法。
pickerPosition 指出日歷控件出現相對於輸入框的位置，默認值就是bottom-right,也可以top-left之類的
daysOfWeekDisabled 一個數組，指出一個星期的星期X不能被選擇。需要注意的是這里day是西方那一套，也就是如果值是[0,6]就可以把周末都disabled掉，而非[6,7]。
初始化參數就說這么多吧，更多的可以參考文檔
■ 編程控制和方法
datetimepicker方法不僅可以用於初始化控件，還可以在初始化完成之后，傳入不同的參數來實現不同的編程控制。比如：
$('#testdp').datetimepicker('show') //顯示日歷 $('#testdp').datetimepicker('hide') //隱藏日歷 $('#testdp').datetimepicker('update') //將輸入框中的日期字符串解析並反映到日歷匯總 $('#testdp').datetimepicker('setStartDate','2017-01-01') //或者null，用來設置日歷最早可選日期 /*類似的很多參數也可以這么設置 比如 setEndDate setDaysOfWeekDisabled ... */
■ 事件
datetimepicker留出了一些事件的接口供我們調用比如
show ， hide ， changeDate，changeYear，changeMonth這些都一目了然
outOfRange 當用戶試圖在日歷上選擇超出了我們設置的范圍（由startDate,endDate,daysOfWeekDisabled等決定）的日期時觸發的事件
嗯 datetimepicker基本上就是這樣了，沒有什么很復雜的地方