带有 Angular JS 和 Require 的 Kendo UI 日期选择器答案

【问题标题】：Kendo UI datepicker with Angular JS and Require带有 Angular JS 和 Require 的 Kendo UI 日期选择器
【发布时间】：2015-04-12 17:40:25
【问题描述】：

我正在尝试将 Kendo UI 日期选择器用于使用 Angular JS 的应用程序中的注册表单。所有文件似乎都可以正确加载，但是什么都没有发生。

要加载库，我正在执行以下操作：

main.js（主要需要文件）

/*
 |--------------------------------------------------------------------------
 | RequireJS app configuration
 |--------------------------------------------------------------------------
 | Loads the app and config
 |
 */

require([
    'libraries'
], function () {

    'use strict';

    require([
        'appBootstrap/app'
    ], function () {

    });

});

库文件包含第三方库和依赖项的列表：

/*
 |--------------------------------------------------------------------------
 | RequireJS external libraries
 |--------------------------------------------------------------------------
 | Add all third party libraries in here.
 |
 */

require.config({

    baseUrl : 'js/',

    paths : {
    angular       : '../../vendor/angular/angular.min',
    ngAMD         : '../../vendor/angularAMD/angularAMD.min',
    jquery        : '../../vendor/jquery/dist/jquery.min',
    kendoUI       : '../../vendor/kendo-ui-core/js/kendo.angular.min'
},

shim : {
    app : {
        deps : ['angular', 'jquery']
    },
    ngAMD : {
        deps : ['angular']
    },
    kendoUI : {
        deps : ['angular', 'jquery']
    }
},

deps: ['appBootstrap/app']

});

最后，我告诉应用导入 kendo ui 指令：

/*
 |--------------------------------------------------------------------------
 | RequireJS application
 |--------------------------------------------------------------------------
 | Loads the different application elements.
 | Controllers, Models, Directives, Services, Factories...
 |
 */

define([
    'ngAMD',
    'kendoUI',
    'jquery'
], function (config, angularAMD) {

    'use strict';

    var app = angular.module('appModule', [
        'kendo.directives'
    ]);

    return angularAMD.bootstrap(app);

});

在页面的控制器中，我已经包含了 datepicker 指令的路径：

define([
    'appBootstrap/app',
    '../../vendor/kendo-ui-core/js/kendo.datepicker.min',
    'services/accountsService'
], function (app) {

    'use strict';

    app.controller('RegisterPlinkerController', function ($scope, $location, $timeout, accountsService) {

        ...

    });

});

在视图中，我添加了一个日期选择器：

<input class="form-control"
       name="date_of_birth"
       id="date_of_birth"
       kendo-date-picker
       ng-model="register.date_of_birth"
       k-ng-model="dateObject">

为什么 datepicker 字段没有做任何事情（除了显示标准文本字段）？

请问有人可以帮忙吗？提前致谢。

【问题讨论】：

标签： angularjs kendo-ui datepicker requirejs

【解决方案1】：

您需要检查 dateObject 是否为 Date 类型，关闭标签并包含所有 css 和 js 文件：

<input kendo-date-picker k-ng-model="dateObject" />

kendo.common.min.css
kendo.common-material.min.css
kendo.default.min.css
kendo.material.min.css

Kendo 通过提供日期类型对象的 k-ng-mode 覆盖 ng-mode。

也许您需要包含 de kendo.core.js 或尝试使用 kendo.all.js。

【讨论】：