angular bootstrap datepicker 获取可见日期(日模式) [英] angular bootstrap datepicker get visible dates (day mode)

问题描述

如果模式为日，我需要从 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>

这样，如果我们在 datepicker 中更改月份，我们将更新可见日期(其中 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.

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