angular bootstrap datepicker 获取可见日期（日模式）

Question

如果模式是日，我需要从日期选择器中获取可见日期。

示例：

在这种情况下，我需要获得这 42 天。此外，如果用户更改月份，我应该刷新 Datepicker 控制器视图并获得新的 42 天。

Answer 1

所以我设法解决了这个问题。我们需要扩展 uibDatepickerDirective

angular.module('ui.bootstrap.datepicker')
.config(function ($provide) {
    $provide.decorator('uibDatepickerDirective', function ($delegate, $timeout) {
        var directive = $delegate[0];
        var link = directive.link;


        angular.extend(directive.scope, {
            visibleDates: '=?'
        });


        directive.compile = function () {
            return function (scope, element, attrs, ctrls) {
                link.apply(this, arguments);

                var datepickerCtrl = ctrls[0];

                datepickerCtrl.getVisibleDates = function () {
                    var year = this.activeDate.getFullYear(),
                     month = this.activeDate.getMonth(),
                     firstDayOfMonth = new Date(this.activeDate);

                    firstDayOfMonth.setFullYear(year, month, 1);

                    var difference = this.startingDay - firstDayOfMonth.getDay(),
                        numDisplayedFromPreviousMonth = difference > 0 ?
                        7 - difference : -difference,
                        firstDate = new Date(firstDayOfMonth);

                    if (numDisplayedFromPreviousMonth > 0) {
                        firstDate.setDate(-numDisplayedFromPreviousMonth + 1);
                    }
                    return this.getDates(firstDate, 42);;
                }

                var firstTime = true;

                $timeout(function () {
                    scope.$watch("activeDt", function () {
                        var newValues = datepickerCtrl.getVisibleDates();
                        if (firstTime) {
                            scope.visibleDates = newValues;
                            firstTime = false;
                            return;
                        }
                        if (newValues[0].getYear() !== scope.visibleDates[0].getYear() ||
                            newValues[0].getMonth() !== scope.visibleDates[0].getMonth() ||
                            newValues[0].getDate() !== scope.visibleDates[0].getDate()) {
                            scope.visibleDates = newValues;
                        }
                    });
                });


            }
        };
        return $delegate;
    });
});

并且在指令本身中，我们需要传递属性可见日期并指向我们要保存这 42 天的变量。

<span  uib-datepicker visible-dates="visibleDates" datepicker- ng-model="datePicked"></span>

这样，如果我们在日期选择器中更改月份，我们将更新 visibleDates（其中 42 个），但如果我们在同一个月（相同的可见日期）更改 activeDate (scope.activeDt)，它将保持不变。

angular bootstrap datepicker 获取可见日期（日模式）

angular bootstrap datepicker get visible dates (day mode)

javascript

angularjs

angular-ui-bootstrap

angular-ui

bootstrap-datepicker