Angularjs 角度材质日期选择器-显示选定的假日
是否可以在角材质日期选择器中显示选定的假日。 这可以在jquery日期选择器中轻松完成 请让我知道是否可以使用角材料(md datepicker)Angularjs 角度材质日期选择器-显示选定的假日,angularjs,datepicker,angularjs-material,Angularjs,Datepicker,Angularjs Material,是否可以在角材质日期选择器中显示选定的假日。 这可以在jquery日期选择器中轻松完成 请让我知道是否可以使用角材料(md datepicker) 可以修饰mdCalendarMonthBody指令,该指令用于在datepicker表中创建单元格 在本例中,我用自己的函数替换了buildDateCell函数。在新函数中,我首先调用旧函数来创建单元格,然后如果日期是假日,我将向单元格添加一个类 require('angular-material'); angular.module('my
可以修饰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;
});
}]);
目前不可能。
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;
}