AngularJS的ui.bootstrap.日期控件,新增week年周面板

截图


AngularJS的ui.bootstrap.日期控件,新增week年周面板_第1张图片

JS


directive('weekpicker', ['dateFilter', function (dateFilter) {
  return {
    restrict: 'EA',
    replace: true,
    templateUrl: 'template/datepicker/week.html',
    require: '^datepicker',
    link: function(scope, element, attrs, ctrl) {
      ctrl.step = { years: 1 };
      ctrl.element = element;
      ctrl._refreshView = function() {
        var year = ctrl.activeDate.getFullYear(),
            // 一年总周数
            weeks = [];
        var now = new Date();
        var lastDate = new Date(year + 1, 0, 0);
        var i = 1; 
        var j = 1;
        while(i <= 365) {
          var beginDate = new Date(year, 0, 0);
          beginDate.setDate(beginDate.getDate() + i);
          var endDate = new Date(year, 0, 0);
          var len = 7 - beginDate.getDay();
          endDate.setDate(endDate.getDate() + i + len);
          weeks.push(angular.extend(ctrl.createDateObject(beginDate, '第' + j + '周'), {
            beginDate: beginDate,
            endDate: endDate > lastDate ? lastDate : endDate,
            uid: scope.uniqueId + '-' + j
          }));
          j++;
          i = i + len + 1;
        }
        scope.title = dateFilter(ctrl.activeDate, ctrl.formatMonthTitle);
        scope.weeks = weeks;
        scope.rows = ctrl.split(weeks, 7);
      };

      ctrl.compare = function(date1, date2) {
        var activeDate = new Date( date2.getFullYear(), date2.getMonth(), date2.getDate() );
        var startDate = date1;
        var endDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
        endDate.setDate(endDate.getDate() + (7 - endDate.getDay()));
        if (activeDate <= endDate && activeDate >= startDate) {
          return 0;
        }
        if (this.minDate) {
          return endDate - activeDate;
        }
        if (this.maxDate) {
          return startDate - activeDate;
        }
      };

      ctrl.handleKeyDown = function( key, evt ) {
        var week = 0;
        if (key === 'left') {
          week = week - 1;   // up
        } else if (key === 'up') {
          week = week - 7;   // down
        } else if (key === 'right') {
          week = week + 1;   // down
        } else if (key === 'down') {
          week = week + 7;
        } else if (key === 'pageup' || key === 'pagedown') {
          var year = ctrl.activeDate.getFullYear() + (key === 'pageup' ? - 1 : 1);
          ctrl.activeDate.setFullYear(year);
        } else if (key === 'home') {
          week = 1;
        } else if (key === 'end') {
          week = scope.weeks.length - 1;
        }
        ctrl.activeDate.setDate(ctrl.activeDate.getDate() + week * 7);
      };

      ctrl.refreshView();
    }
  };
}])

TPL


angular.module("template/datepicker/week.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/datepicker/week.html",
    "\n" +
    "  \n" +
    "    \n" +
    "      \n" +
    "      \n" +
    "      \n" +
    "    \n" +
    "  \n" +
    "  \n" +
    "    \n" +
    "      \n" +
    "    \n" +
    "  \n" +
    "
\n" + " \n" + "
\n" + ""); }]);

datepicker模板中增加weekpicker

angular.module("template/datepicker/datepicker.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/datepicker/datepicker.html",
    "
\n" + " \n" + " \n" + " \n" + " \n" + "
"); }]);

HTML


Controller 中的datepicker-options


    var nowDate = new Date();
    $scope.dateOptions = {
      formatYear: 'yyyy',
      showWeeks: true,
      minMode: 'week',
      // maxDate: '\'' + nowDate.getFullYear() + '-' + (nowDate.getMonth() + 1) + '-' + nowDate.getDate() + '\'',
      // minDate: '\'' + nowDate.getFullYear() + '-' + (1) + '-' + nowDate.getDate() + '\'',
      datepickerMode: 'week',
      class: 'datepicker'
    };

最后在DatepickerControllerthis.modes = ['day', 'month', 'year'];后增加两行代码:

if ($attrs.minMode === 'week') {
    this.modes = ['week', 'year'];
}
$scope.datepickerMode = $attrs.datepickerMode || datepickerConfig.datepickerMode;

你可能感兴趣的:(bootstrap,angular,前端)