angularjs - Angular Material Datepicker - 显示选定的假期

Question

是否可以在角度材料日期选择器中显示选定的假期。 https://material.angularjs.org/latest/demo/datepicker。

它可以很容易地在 jquery date-picker 中完成。适用于假期和周末的 MVC 日期选择器

请让我知道是否可以使用有角材料（md-datepicker）来完成

var holidays_dates = ["11-25-2015", "11-27-2015", "11-29-2015","10-9-2015"];

Answer 1

您可以装饰 mdCalendarMonthBody 指令，它是在 datepicker 表中创建单元格的指令。

在示例中，我用自己的函数替换了 buildDateCell 函数。新函数中的第一件事是调用旧函数来创建单元格，然后如果日期是假期，我将向单元格添加一个类。

require('angular-material');
    angular.module('myApp', [])
           .config([ '$provide', function($provide) {

                $provide.decorator('mdCalendarMonthBodyDirective', function($delegate) {
                    var originalDirective = $delegate[0];

                    var oldBuildDateCell = originalDirective.controller.prototype.buildDateCell;
                    originalDirective.controller.prototype.buildDateCell = function(opt_date) {
                        var cell = oldBuildDateCell.apply(this, [opt_date]);

                        var holidays = [{'holidayType':'holiday_type_newyear','date':'2015-12-31T23:00:00.000Z'},{'holidayType':'holiday_type_prayer_day','date':'2016-04-21T22:00:00.000Z'},{'holidayType':'holiday_type_easter_monday','date':'2016-03-27T22:00:00.000Z'},{'holidayType':'holiday_type_pentecost_day','date':'2016-05-14T22:00:00.000Z'},{'holidayType':'holiday_type_good_friday','date':'2016-03-24T23:00:00.000Z'},{'holidayType':'holiday_type_christmas_day','date':'2016-12-24T23:00:00.000Z'},{'holidayType':'holiday_type_boxing_day','date':'2016-12-25T23:00:00.000Z'},{'holidayType':'holiday_type_maundy_thursday','date':'2016-03-23T23:00:00.000Z'},{'holidayType':'holiday_type_ascension_day','date':'2016-05-04T22:00:00.000Z'},{'holidayType':'holiday_type_whit_monday','date':'2016-05-15T22:00:00.000Z'},{'holidayType':'holiday_type_palm_sunday','date':'2016-03-19T23:00:00.000Z'},{'holidayType':'holiday_type_easter_day','date':'2016-03-26T23:00:00.000Z'}];
                        if (opt_date) {
                            for (var i=0; i<holidays.length; i++) {
                                if (this.dateUtil.isSameDay(opt_date, new Date(holidays[i].date))) {
                                    cell.classList.add('datepicker-holiday');
                                }
                            }
                        }
                        return cell;
                    };

                    return $delegate;

                });
        }]);

然后剩下的就是为日历中的假期创建一个样式。

.datepicker-holiday .md-calendar-date-selection-indicator {
    background-color: #00C853;
}