Formly模板中的Angularjs Material md-datepicker不会打开日历窗格

Question

我尝试使用md-datepicker创建一个Formly模板。不幸的是，当我点击表单中的md-datepicker控件时，日历面板无法打开。

控制器代码：

{
    className: 'col-xs-6',
    key: 'dateCreated',
    type: 'materialdatepicker',
    templateOptions: {
        label: 'Created'
    },
    expressionProperties: {
        'templateOptions.disabled': function () {
            return !vm.options.editMode;
        },
        'templateOptions.required': function () {
            return vm.options.editMode;
        }
    }
}

模板：

<script type="text/ng-template" id="materialdatepicker.html">
    <div layout="column">
        <div flex="100">
            <p class="input-group" style="display: block; margin: 0px;">
                <md-datepicker id="{{::id}}" name="{{::id}}" ng-model="model[options.key]"></md-datepicker>
            </p>
            <div class="formlyMessages" ng-messages="fc.$error" ng-if="fc.$touched">
                <div class="formlyMessage" ng-message="{{::name}}" ng-repeat="(name, message) in ::options.validation.messages">
                    {{message(fc.$viewValue, fc.$modelValue, this)}}
                </div>
            </div>
        </div>
    </div>
</script>

形式配置：

formlyConfigProvider.setType({
    name: 'materialdatepicker',
    templateUrl: 'materialdatepicker.html',
    wrapper: ['bootstrapLabel', 'bootstrapHasError'],
    defaultOptions: {
        ngModelAttrs: ngModelAttrs
    },
    controller: ['$scope', function ($scope) {
        $scope.materialdatepicker = {};
    }]
});

我似乎无法弄清楚如何让日历面板打开。我在控制台中没有收到任何错误，控件确实填充了我的初始值。

有什么想法吗？

Answer 1

我在原帖中忘记提到的是这个表单包含在一个模态窗口（$ uibModal）中。因此，日历窗格弹出我的模态窗口。

此处找到的解决方案对我有用：Angular Material DatePicker Calendar Shows Behind Angular Modal

您需要告诉您的日历窗格以高z-index打开，以便它在模式上方呈现。将此样式表代码放入模态html：

<style>
    .md-datepicker-calendar-pane {
        z-index: 1200;
    }
</style>