bootstrap-ui-datetime-picker插件学习

2024-09-25 18:03:19

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；

纯时间

纯日期

最新文章

热门文章