安裝與使用

• bower 安裝

bower install angular-daterangepicker --save
//由于是二次開發(fā)得插件，還需要下載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中設(shè)置日期控件配置項

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:'' // 結(jié)束時間
    },
    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: { // 監(jiān)聽按鈕點擊事件
          '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