bootstrap-ui-datetime-picker插件學習

GitHub：https://github.com/Gillardo/bootstrap-ui-datetime-picker

準備

安裝：bower install --save bootstrap-ui-datetime-picker

引入文件：

<script src="scripts/lib/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="scripts/lib/bootstrap-ui-datetime-picker/dist/datetime-picker.js"></script>

依賴注入：angular.module('app', ['ui.bootstrap', 'ui.bootstrap.datetimepicker']);

用法

• ng-model：綁定日期對象
• is-open：控制日曆是否顯示

• datetime-picker="yyyy-MM-dd"：日期顯示格式

• enable-time="false"：是否容許輸入時間

• enable-date="false"：是否容許輸入日期

• datepicker-append-to-body="true"：日曆位置

• close-on-date-selection：true/false，日期被選擇後日歷是否關閉，對於TimePicker不生效

• default-time="17:00" ：選擇日期時間時，默認的時間值，對於純時間不支持

• when-closed="$ctrl.closeTimeData(args)"：當piker關閉時，執行的返回函數

• datepicker-options

  showWeeks: false, //是否顯示星期 startingDay: 1, //每行從周幾開始，0-6 minDate:$ctrl.data.dateBegin, //可選擇最小日期（可包含） maxDate:$ctrl.data.dateEnd //可選擇的最大日期（可包含）

   

• timepicker-options

  min:$ctrl.data.timeBegin //可選擇最小時間（純時間不可包含；日期時間可包含） max:$ctrl.data.timeEnd //可選擇的最大時間（純時間不可包含；日期時間可包含） showMeridian: false //24Hfalse,12Htrue readonlyInput: true //禁止手動輸入時間

   

日期時間

• ng-model不符合配置中的min和max時，會將ng-model自動轉換爲undefined；
• 用FormName.$invalid來判斷選擇日期時間是否符合配置min和max；

純時間

 

純日期