角引导日期选择器获取可见日期(日模式) [英] angular bootstrap datepicker get visible dates (day mode)

问题描述

如果模式为day，我需要从Datepicker获取可见的日期.

I need to get visible dates from the Datepicker if mode is day.

示例:

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

In this case I need to get these 42 days. Also if user change month, I should refresh the Datepicker controller view and get new 42 days.

推荐答案

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

So i managed to fix this. We need to extend 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天的变量.

And in directive itself we need to pass atribute visible-dates and point to the variable where we want to save these 42 days.

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

通过这种方式，如果我们在日期选择器中更改月份，我们将更新visibleDate(其中的42个)，但是如果在同一个月(相同的可见日期)上更改activeDate(scope.activeDt)，则它将保持不变.

This way we will update visibleDates (42 of them) if we change month in datepicker, but if we change activeDate (scope.activeDt) on the same month (same visible dates), it will stay unchanged.

这篇关于角引导日期选择器获取可见日期(日模式)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！