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

Question

我正在尝试为后台的新部分创建一个编辑屏幕.我已经按照各种教程了解了如何解决这个问题,它适用于普通文本字段.

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

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

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

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

链接:

主要教程

Bootstrap-DatePicker帮助文档

----上面的问题发布在我们的.Umbraco.org论坛上,但没有回复,所以我想我会在这里问你们有帮助的人.----

更多的信息,

我试过这样的事情:

Plunker可能的解决方案示例

但是,在Umbraco中实现它似乎不起作用.我收到一个错误,说当我检查页面时找不到Moment,我可以看到其中存在以下行:

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

我会在这里粘贴整个Plunker示例,但示例本身工作正常.当我在Umbraco插件代码中使用它时,它不起作用.

我现在完全失去了.理想情况下,我想要一些人为的"日期选择器",但目前似乎不是一个可行的选择,所以Plunker方法是我的下一个想法.

提前致谢

聂

Answer 1

我刚才遇到过这个问题,我使用了创建一个自定义角度控制器,它实际上是Umbraco.PropertyEditors.DatepickerController来自umbraco.controllers.js的默认Umbraco 的副本.

在插件文件夹中创建一个名为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>

我对控制器进行了一些自定义,因为我想将表单绑定到条件对象.您可能希望更改一些内容以使其按照您希望的方式工作,但这至少应该为您提供一个起点.