angular-daterangepicker实例

最新推荐文章于 2024-08-22 09:20:35 发布

弱翁

最新推荐文章于 2024-08-22 09:20:35 发布

阅读量3.7k

点赞数

分类专栏： angular插件文章标签： angular 实例

本文链接：https://blog.csdn.net/BlackSun_JAVA/article/details/73776375

版权

angular插件专栏收录该内容

0 篇文章 0 订阅

订阅专栏

采用angualr-daterangepicker最好将其作为常量配置到系统常量文件夹。在实际使用中只需要angular引入即可。

常量配置：

angular.module('company_name')
    .constant('DATE_RANGES_TIMES',{
      locale: {
        applyClass: 'btn-green',
        applyLabel: "确定",
        cancelLabel: '取消',
        fromLabel: "开始",
        format: "YYYY-MM-DD",
        toLabel: "到",
        customRangeLabel: '自定义时间',
        daysOfWeek: [ '日', '一', '二', '三', '四', '五', '六' ],
        firstDay: 1,
        monthNames: [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ]
      },
      maxDate: moment(),  //最大值今天
      minDate: moment().subtract(90, 'days'), //最长允许选择90天
      "ranges": {
        "今天": [
          moment(),
          moment()
        ],
        "昨天": [
          moment().subtract(1, 'days'),
          moment().subtract(1, 'days'),
        ],
        "过去7天": [ moment().subtract(7, 'days'), moment().subtract(1, 'days') ],
        "过去30天": [ moment().subtract(30, 'days'), moment().subtract(1, 'days') ]
      },
      "alwaysShowCalendars": true,
      "showCustomRangeLabel": false,
    });

常量使用：

//将DATE_RANGES_TIMES引入的之前需要gulp进行编译过。
angular.module('company_name').controller('Controller', function($scope,DATE_RANGES_TIMES){
    $scope.options = {};//全局变量配置
    $scope.dateRangOptions = DATE_RANGES_TIMES;

    $scope.datePicker = {
        date: {startDate: moment().subtract(7, 'days'), endDate: moment().subtract(1, 'days')}
    };

    $scope.$watch('datePicker.date', function () {
        $scope.options.start = $scope.datePicker.date.startDate.format("YYYY-MM-DD");
        $scope.options.end = $scope.datePicker.date.endDate.format("YYYY-MM-DD");
        $scope.getData();
    }, false);
});