kendo-datepicker无法显示默认值，报Cannot read properties of undefined错误如何解决

执行你写的内联脚本时，AngularJS还未完成DOM节点的编译、Kendo DatePicker组件还未完成初始化，此时通过$("#datepicker").data("kendo-datepicker")获取到的实例为undefined，调用value方法就会触发该错误。此外你使用的是AngularJS封装的Kendo组件，直接通过jQuery操作DOM组件的方式不符合框架使用规范，容易引发视图和数据状态不一致的问题。

方案一（推荐）：通过ng-model双向绑定设置默认值 #

Kendo DatePicker的ng-model会自动同步数据和视图状态，你只需要在对应控制器中给绑定的变量初始化值即可，不需要额外操作组件实例：

模板代码 #

<div class="form-group" ng-class="{'has-error' : basicUserInfo.dobDate.$invalid && submitted}">                                    
    <input kendo-datepicker
            ng-model="basicUserInfo.dobDate"
            name="dobDate"
            k-placeholder="'请选择出生日期'"
            id="datepicker"
            class="form-control" />
</div>

控制器代码 #

angular.module('你的应用名').controller('你的控制器名', function($scope) {
    // 初始化绑定对象和日期值，Date参数依次为年、月（0代表1月）、日
    $scope.basicUserInfo = {
        dobDate: new Date(2020, 0, 1)
    };
    // 其他业务逻辑
})

方案二：通过组件就绪事件操作实例赋值 #

如果你确实需要调用组件实例的方法赋值，可以使用Kendo提供的k-on-ready事件，该事件会在组件完全初始化后触发，此时可以拿到有效实例：

模板新增k-on-ready配置 #

<input kendo-datepicker
        ng-model="basicUserInfo.dobDate"
        name="dobDate"
        k-placeholder="'请选择出生日期'"
        k-on-ready="onDatepickerReady(e)"
        id="datepicker"
        class="form-control" />

控制器新增对应方法 #

$scope.onDatepickerReady = function(e) {
    // e.sender就是已初始化完成的DatePicker实例
    const datepicker = e.sender;
    datepicker.value(new Date(2020, 0, 1));
}

• 给DatePicker赋值时优先传入Date类型的值，避免字符串格式和组件配置的日期格式不匹配导致解析失败
• 原代码中的k-placeholder配置为'User ID'属于笔误，可根据实际业务调整为对应提示文本

内容的提问来源于stack exchange，提问作者dmytro.kozyr