jquery - Umbraco7 新后台部分，编辑日期字段，AngularJS

Question

我正在尝试为后台的新部分创建编辑屏幕。我已经遵循了有关如何执行此操作的各种教程，并且它对于普通文本字段运行良好。

但是，我的模型有 2 个日期字段作为其一部分，我想为它们添加一些日期选择器。我一辈子都无法让他们工作。我尝试过连接到 bootstrap 并使用 Bootstrap-DatePicker 将文本输入转换为日期时间选择器，但无济于事。

更烦人的是，如果我使用日期输入类型，那么创建屏幕使用日期选择器就可以正常工作。然而，由于 Umbraco 中 AngularJs 的版本，编辑屏幕无法正确绑定(bind)，因此试图找到解决方法。

我正在使用 AngularJS 方法来创建 View 。

任何有关我如何实现这一目标的帮助将不胜感激。

链接:

Main tutorial

Bootstrap-DatePicker help documents

---- 上述问题已发布在 our.Umbraco.org 论坛上，但尚未得到回复，所以我想我应该在这里向各位有帮助的人询问。 ----

更多信息，

我尝试过做这样的事情:

Plunker Example of a possible work around

但是，在 Umbraco 中实现时它似乎不起作用。当我检查页面时，我收到一条错误消息，指出尚未找到 Moment，我可以看到其中存在以下行:

<script src="http:////cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script> 

我会将整个 Plunker 示例粘贴到此处，但该示例本身运行良好。当我在 Umbraco 插件代码中使用它时，它不起作用。

我现在完全迷失了。理想情况下，我想要某种人工“日期选择器”，但目前这似乎不是一个可行的选择，因此 Plunker 方法是我的下一个想法。

提前致谢

尼克

Answer 1

我不久前遇到了这个问题，我求助于创建一个自定义 Angular Controller ，它本质上是来自 umbraco.controllers.js 的默认 Umbraco Umbraco.PropertyEditors.DatepickerController 的副本。

在插件文件夹中创建一个名为 datepicker.controller.js 的新文件，然后粘贴以下代码:

angular.module("umbraco").controller("Custom.DatepickerController",
    function ($scope, notificationsService, assetsService, angularHelper, userService, $element) {

        //lists the custom language files that we currently support
        var customLangs = ["pt-BR"];

        //setup the default config
        var config = {
            pickDate: true,
            pickTime: false,
            pick12HourFormat: false,
            format: "dd/MM/yyyy"
        };

        //handles the date changing via the api
        function applyDate(e) {
            angularHelper.safeApply($scope, function () {
                // when a date is changed, update the model
                if (e.localDate) {
                    if (config.format == "yyyy-MM-dd hh:mm:ss") {
                        $scope.criteria[$element.attr('id')] = e.localDate.toIsoDateTimeString();
                    }
                    else {
                        $scope.criteria[$element.attr('id')] = e.localDate.toIsoDateString();
                    }
                }
            });
        }

        //get the current user to see if we can localize this picker
        userService.getCurrentUser().then(function (user) {

            assetsService.loadCss('lib/datetimepicker/bootstrap-datetimepicker.min.css').then(function () {
                var filesToLoad = ["lib/datetimepicker/bootstrap-datetimepicker.min.js"];

                //if we support this custom culture, set it, then we'll need to load in that lang file
                if (_.contains(customLangs, user.locale)) {
                    config.language = user.locale;
                    filesToLoad.push("lib/datetimepicker/langs/datetimepicker." + user.locale + ".js");
                }

                assetsService.load(filesToLoad).then(
                    function () {
                        //The Datepicker js and css files are available and all components are ready to use.

                        // Open the datepicker and add a changeDate eventlistener
                        $element.find("div:first")
                            .datetimepicker(config)
                            .on("changeDate", applyDate);

                        if ($scope.criteria[$element.attr('id')]) {
                            //manually assign the date to the plugin
                            $element.find("div:first").datetimepicker("setValue", $scope.criteria[$element.attr('id')]);
                        }

                        //Ensure to remove the event handler when this instance is destroyted
                        $scope.$on('$destroy', function () {
                            $element.find("div:first").datetimepicker("destroy");
                        });
                    });
            });
        });
    });

在 package.manifest 中包含对新文件的引用，如下所示:

{
    javascript: [
        '~/App_Plugins/Custom/datepicker.controller.js'
    ]
}

然后向您的 View 添加一个输入，并使用引用新 Controller 的 ng-controller 属性 (Custom.DatepickerController) 来装饰包含的 div在这种情况下)。

<div class="control-group umb-control-group">
    <div class="umb-el-wrap">
        <label class="control-label">From date</label>
        <div class="controls controls-row">
            <div class="umb-editor umb-datepicker" ng-controller="Custom.DatepickerController" id="from">
                <div class="input-append date datepicker" style="position: relative;">
                    <input name="from" data-format="dd/MM/yyyy" type="text" ng-model="criteria.from" />
                    <span class="add-on">
                        <i data-date-icon="icon-calendar"></i>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

我对 Controller 进行了一些自定义，因为我想将表单绑定(bind)到条件对象。您可能想要更改一些内容，以便让它按照您想要的方式工作，但这至少应该为您提供一个起点。