angular-daterangepicker-时间插件
转载：https://github.com/fragaria/angular-daterangepicker
注意：使用Bootstrap Datepicker v 3.0.3及更高版本！
通过Bower安装
安装选择器的最简单方法是：
bower install angular-daterangepicker --save
手动安装
该指令依赖于Bootstrap Datepicker，Bootstrap，Moment.js和jQuery。下载上面的依赖项，然后使用缩小版或普通版。
基本用法
假设bower安装目录是bower_components。如果是其他安装目录，请相应更新路径。
声明依赖：
App = angular.module('app', ['daterangepicker']);
在控制器中准备模型。该模型必须有startDate和endDate属性：
exampleApp.controller('TestCtrl', function ($scope) {$scope.datePicker = { date: {startDate: null, endDate: null} };
}
然后在您的HTML中，只需将属性添加date-range-picker到任何输入并将其绑定到模型。
请参阅example.html工作演示。
注意点！
不要忘记在模型对象中添加点（。）以避免范围继承问题。例如，使用$scope.datePicker.date而不是$scope.date。
高级用法
#### 额外选项
这些是除daterangepicker中提供的选项之外的选项。
pickerClasses：string
- 附加的classesadded到picker下拉元素
cancelOnOutsideClick：boolean （默认值：true） （仅当autoApply == false时适用）
如果为true，则在日历上更改值之后单击选取器外部将触发单击取消而不是将值应用于模型。如果为false，则触发apply。
changeCallback：function（startDate，endDate，label）
这将在第二个$ .daterangepicker回调参数中调用
#### 可选属性
picker：object
- 要将dateRangePicker数据对象分配给的对象
options：object（watched）
- 所有dateRangePicker选项
clearable：boolean （watched）
- 将更改取消按钮以清除并options.locale.clearLabel用于文本
min＆max：时刻 || 日期字符串（已观察）
- 设置选取器的最小/最大日期值
picker-classes：string
- 添加到picker下拉元素的其他类
示例元素
$scope.dateRangePicker = {date: {startDate:null, endDate: null},options: {opens: "left", //打开的方向，可选值有‘left‘/‘right‘/‘center‘drops: "down", //('down'/'up'）打开的方向pickerClasses: 'custom-display', //angular-daterangepicker extrabuttonClasses: 'btn btn-sm',applyButtonClasses: 'btn-primary',cancelButtonClasses: 'btn-default',autoApply: false, //隐藏“应用”和“取消”按钮alwaysShowCalendars: false,showCustomRangeLabel: true,/*timePicker: true, //显示时间选择器timePicker24Hour: true, //24小时制timePickerSeconds: true,//是否显示秒minDate: "2017-01-06",maxDate: "2019-01-06",*/locale: { // 本地化applyLabel: "确定",cancelLabel: "取消",fromLabel: "起始时间",toLabel: "结束时间",customRangeLabel: "自定义范围",daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],monthNames: ["一月", "二月", "三月", "四月", "五月", "六月","七月", "八月", "九月", "十月", "十一月", "十二月"],firstDay: 1,separator: ' - ',format: "YYYY-MM-DD", //will give you 2017-01-06//format: "D-MMM-YY", //will give you 6-Jan-17//format: "D-MMMM-YY", //will give you 6-January-17},ranges: {"今天": [moment(), moment()],"昨天": [moment().subtract("days", 1), moment().subtract("days", 1)],'本周': [moment().startOf('week'), moment().endOf('week')],"本月": [moment().startOf("month"), moment().endOf("month")],"上月": [moment().subtract("month", 1).startOf("month"), moment().subtract("month", 1).endOf("month")],'今年': [moment().startOf('year'), moment().endOf('year')],'昨年': [moment().subtract('year', 1).startOf("year"), moment().subtract("year", 1).endOf('year')],"最近七天": [moment().subtract("days", 6), moment()],"最近一个月": [moment().subtract("days", 29), moment()],},eventHandlers: {'apply.daterangepicker': function(event, picker) { console.log('applied'); }}}};
活动
可选地，事件处理程序可以通过eventHandlers属性传入options。
支持Bootstrap daterangepicker中的所有事件处理程序。供参考，完整列表如下：
show.daterangepicker：显示选择器时触发
hide.daterangepicker：隐藏选择器时触发
showCalendar.daterangepicker：显示日历时触发
hideCalendar.daterangepicker：隐藏日历时触发
apply.daterangepicker：单击应用按钮时触发
cancel.daterangepicker：单击取消按钮时触发
兼容性
版本> 0.3.0需要Bootstrap Datepicker 3.0.3及更高版本。版本> 0.2.0需要Bootstrap Datepicker 2.0.0及更高版本。版本> 0.1.1需要Bootstrap Datepicker 1.3.3及更高版本。
链接
查看原始文档。
下载：https://pan.baidu.com/s/1c3zdHXthG-WxUEX9SeSnzw
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！