Question

如果模式是白天，我需要从Datepicker获取可见日期。

示例：

在这种情况下，我需要这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;
    });
});

在指令本身中，我们需要传递属性visible-dates并指向我们要保存这42天的变量。

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

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

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

1 个答案: