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

Question

我正在为后台的一个新的部分创建一个编辑屏幕。我已经学习了关于如何进行这方面的各种教程，对于正常的文本字段来说，它运行得很好。

但是，我的模型有两个日期字段作为其中的一部分，我想为它们添加一些日期选择器。我不能为了我的一生让他们去工作。我尝试过连接到引导程序中，并使用Bootstrap-DatePicker将文本输入转换为日期时间选择器，但没有效果。

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

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

如果能对我如何做到这一点提供帮助，我们将不胜感激。

链接：

主教程

引导-数据采集器帮助文档

进一步资料，

我试过这样做：

可能的工作的柱塞例子

但是，在Umbraco中实现时，它似乎不起作用。我收到一个错误，说当我检查页面时，还没有找到这个时刻，我可以看到它中有以下一行：

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

我会在这里粘贴整个柱塞示例，但是示例本身很好。当我在我的Umbraco插件代码中使用它时，它就不能工作了。

我现在完全不知所措。理想情况下，我想要一些人工的“日期选择器”，但目前看来这并不是一个可行的选择，所以柱塞方法是我的下一个想法。

提前感谢

耐克

Answer 1

不久前，我遇到了这个问题，我求助于创建一个自定义角控制器，该控制器本质上是来自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'
    ]
}

然后向视图中添加一个输入，并使用引用新控制器(本例中为div )的ng-controller属性装饰包含的ng-controller。

<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>

我对控制器进行了一些自定义，因为我想将表单绑定到条件对象。你可能想要改变一些事情，以使它以你想要的方式工作，但这至少应该给你一个起点。