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；

纯时间

 

纯日期