Kendo Datepicker的month content调用控制器函数报错，求正确实现方法

这个需求完全可以实现，你代码里的错误主要来自两个点：

1. 在month.content的箭头函数中错误使用了Angular插值语法{{}}，这里直接调用函数即可，不需要插值
2. dateBackground函数定义在datePickerOptions之后，初始化配置时该函数还未挂载到$scope，导致找不到函数报错

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS example</title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.7.0/default/default-ocean-blue.css">
    <script src="https://kendo.cdn.telerik.com/2023.2.829/js/jquery.min.js"></script>
    
    <script src="https://kendo.cdn.telerik.com/2023.2.829/js/angular.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2023.2.829/js/kendo.all.min.js"></script>
    
</head>
<body>
<div id="example" ng-app="MyModule">
    <div ng-controller="MyCtrl">
       <input kendo-date-picker k-options="datePickerOptions"/>
    </div>
</div>

<script>
    angular.module("MyModule", ["kendo.directives"])
        .controller("MyCtrl", function ($scope) {
            // 先定义函数，确保初始化配置时函数已存在
            $scope.dateBackground = function(data) {
                // 可添加逻辑，给指定日期加特殊类
                let className = data.value.getDate() % 2 === 0 ? 'color' : '';
                return `<span class="${className}">${data.value.getDate()}</span>`;
            };

            $scope.datePickerOptions = {
                value: new Date(),
                month: {
                    // 直接引用$scope上的函数，无需插值
                    content: $scope.dateBackground
                },
            };
        })
</script>

<style>
  /* 替换:has选择器，兼容性更好 */
  .k-calendar-td .color {
      background-color: red;
      padding: 2px;
      border-radius: 50%;
  }
</style>

</body>
</html>

关键修改说明 #

• 调整函数定义顺序：先定义dateBackground函数，再创建datePickerOptions配置对象，确保初始化时函数已存在于$scope
• 移除错误的插值语法：content属性直接赋值为$scope.dateBackground函数引用，Kendo会自动传入data参数
• 优化CSS兼容性：替换:has()选择器为更兼容的子元素选择器，避免部分浏览器不支持的问题

如果需要针对特定日期（比如节假日、业务日期）设置背景色，可以在dateBackground函数中添加判断逻辑，比如：

$scope.dateBackground = function(data) {
    // 示例：给10号和20号设置背景色
    const targetDates = [10, 20];
    let className = targetDates.includes(data.value.getDate()) ? 'color' : '';
    return `<span class="${className}">${data.value.getDate()}</span>`;
};

内容的提问来源于stack exchange，提问作者Lurch USA