Question

我正在尝试使用Angular JS在应用程序中使用Kendo UI datepicker作为注册表单。所有文件似乎都正确加载，但没有发生任何事情。

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

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字段没有做任何事情（除了显示标准文本字段）？

请可以seombody帮忙吗？提前谢谢。

Answer 1

您需要检查 dateObject 是否为日期类型，关闭标记并包含所有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。

带有Angular JS和Require的Kendo UI datepicker

1 个答案: