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

Question

我正在尝试为后台的新部分创建一个编辑屏幕。我已经按照各种教程学习如何解决这个问题，它对普通文本字段工作正常。

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

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

我正在使用 AngularJS 方法创建视图。

如果能帮助我实现这一点，我将不胜感激。

链接：

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 插件代码中使用它时，它就不起作用了。

我现在完全不知所措。理想情况下，我想要某种人工 "date picker"，但目前这似乎不是一个可行的选择，所以 Plunker 方法是我的下一个想法。

提前致谢

尼克

Answer 1

我不久前遇到了这个问题，我求助于创建一个自定义 angular 控制器，它本质上是 [=33= 的默认 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'
    ]
}

然后向您的视图添加一个输入，并使用引用您的新控制器（在本例中为 Custom.DatepickerController）的 ng-controller 属性装饰包含 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>

我对控制器进行了一些自定义，因为我想将表单绑定到标准对象。您可能想要更改一些内容以使其以您想要的方式工作，但这至少应该为您提供一个起点。

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

Umbraco7 new backoffice section, edit date field, AngularJS

jquery

angularjs

plugins

umbraco7