Question

我正在尝试为后台的新部分创建编辑屏幕。我已经关注了如何解决此问题的各种教程，它适用于普通文本字段。

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

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

我使用AngularJS方法创建视图。

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

链接：

Main tutorial

Bootstrap-DatePicker help documents

----上面的问题发布在我们的.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插件代码中使用它时，它不起作用。

我现在完全失败了。理想情况下，我想要某种人造的＆＃34;日期选择器＆＃34;但目前似乎并不是一个可行的选择，所以Plunker方法是我的下一个想法。

提前致谢

的Nik

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的内容（在这种情况下为Custom.DatepickerController）。

<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

1 个答案: