安装与使用

• bower 安装

bower install angular-daterangepicker --save
//由于是二次开发得插件，还需要下载moment.js配合使用
bower install moment --save

• npm 安装

npm intall angular-daterangepicker --save
npm intall moment --save

使用

• 页面引入方式

<script src="misc/components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="misc/components/angular-daterangepicker/js/angular-daterangepicker.js"></script>
<script src="bower_components/moment/moment.js"></script>

• 在使用得模块中声明依赖

 var app = angular.module('app',['daterangepicker'])

• 在controller中设置日期控件配置项

app.controller('myCtrl',function($scope){
   $scope.nwDatePcikerData = {
    startTime:moment().subtract(6,'hours').format('YYYY-MM-DD HH:mm:ss'),
    endTime:moment().format('YYYY-MM-DD HH:mm:ss')
  };
  $scope.daterangepickerOptions = {
    maxDate:new Date(), // 最大选择日期
    date:{
      startDate:'', // 开始时间
      endDate:'' // 结束时间
    },
    options: {
      pickerClasses: 'custom-display', // 日期控件得样式class
      buttonClasses: 'btn', // 按钮得class
      picker: null, // 是否代理带别得对象
      timePicker:true, // 是否显示时间选择框
      timePicker24Hour:true, // 时间选择是否是24小时制
      applyButtonClasses: 'btn-primary', // 确定按钮得class
      cancelButtonClasses: 'btn-danger', // 取消按钮得calss
      locale: {
          applyLabel: "确定", // 确定按钮文本
          cancelLabel: '取消', // 取消按钮文本
          format: "YYYY-MM-DD HH:mm:ss", // 日期选择控件展示日期得过滤
      },
      eventHandlers: { // 监听按钮点击事件
          'apply.daterangepicker': function(event, picker) {
            let flag = handlerSpan($scope.daterangepickerOptions.date.startDate,$scope.daterangepickerOptions.date.endDate);
            if(!flag.passed){
              toaster.pop({
                type:'warning',
                body:flag.toasterText
              })
            }
            $scope.nwDatePcikerData.startTime = $scope.daterangepickerOptions.date.startDate.format('YYYY-MM-DD HH:mm:ss');
            $scope.nwDatePcikerData.endTime = $scope.daterangepickerOptions.date.endDate.format('YYYY-MM-DD HH:mm:ss');
          }
      }
    }
  };
})

• HTML部分

<div
  date-range-picker 
  ng-model="daterangepickerOptions.date"
  picker="daterangepickerOptions.picker"
  picker-classes="extra-class-names"
  max="daterangepickerOptions.maxDate"
  options="daterangepickerOptions.options"
  class="inline nw-date-content" 
>
  <span>{{nwDatePcikerData.startTime}}</span>
  <span>至</span>
  <span>{{nwDatePcikerData.endTime}}</span>
  <i class="fa fa-calendar"></i>
  <div class="nw-date-select-box">
  </div>  
</div>

• 还有很多配置项，没有用到就没有列出来了，可以去往angular-daterangepicker