html - AngularJS 日期选择器布局

Question

我正在研究 AngularJS 日期选择器。它工作正常，但输入框的布局不正确。我无法纠正它。这是我的 HTML 页面中的代码片段:

<div class="form-group">
    <label for="startDate" class="col-sm-5 control-label">Date:</label>
    <div class="col-sm-4">
        <div id="date" class="input-append" datetimez ng-model="var1">
            <input data-format="MMM-yyyy" type="text" id="input1" name="input1" class="form-control"/>
            <span class="add-on">
                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
            </span>
        </div>
    </div>
</div>

我的 Angular js 代码是:

app.controller('headerCtrl', function ($scope) {
    $scope.var1 = '07-2013';
});

app.directive('datetimez', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            element.datetimepicker({
                format: "MM-yyyy",
                viewMode: "months",
                minViewMode: "months",
                pickTime: false,
            }).on('changeDate', function (e) {
                ngModelCtrl.$setViewValue(e.date);
                scope.$apply();
            });
        }
    };
});

这是我得到的输出。我需要日期选择器输入框的高度和宽度与上面的组合框相似。我在这里使用了 bootstrap css。有什么帮助吗？这是 plunkr添加。单击左侧面板上的报告详细信息。

Answer 1

折腾了一下，发现了这个问题。您需要从 body

中删除 position:relative

body{
    /* position: relative; */
    background-image: url('../images/timesheet_back.jpg');
    background-repeat:no-repeat;
    background-size:150% 150vh;
}

此外，您的日期时间选择器样式被 bootstrap-combined.min.css 覆盖将此添加到您的样式中应该可以解决问题

.input-append input, .input-append span{
  height:auto !important;
}

这应该可以解决您的问题。检查更新的 plunkr希望有所帮助。