Question

AngularJS中的日期选择器（ui.bootstrap.datepicker）会显示指定月份的6周日历。

默认情况下，我们如何将其更改为每月5周的datepicker，并且仅在必要时使用6周的行？

    <input type="text" class="form-control datedesktop"
            uib-datepicker-popup="{{format}}"
            ng-model="dt"
            is-open="popup1.opened"
            datepicker-options="dateOptions"
            ng-required="true"
            show-button-bar="true"
            show-weeks="false"
            alt-input-formats="altInputFormats"
            on-open-focus="false"
            close-text="X"
            clear-text=""
            ng-click="open()" />
        <span class="input-group-btn">
            <button type="button" class="btn btn-default btn-calendar" ng-click="open()">
                <i class="glyphicon glyphicon-calendar"></i>
            </button>
        </span>

Answer 1

正如@svarog所提到的覆盖模板是最好的方法。

没有选择改为5周。

如果您看到datepicker library（第399行）

// 42 is the number of days on a six-week calendar
    var days = this.getDates(firstDate, 42);

周数42（6周* 7天）是硬编码的。如果您将42替换为35，（5周* 7行），这将为您提供5周的日历。

Answer 2

当必须隐藏不属于当前月份的行时遇到类似问题。也许我的解决方案对某人有用。 UI Bootstrap版本2.5.0

overwrited uib / template / datepicker / day.html template。

"<tr class=\"uib-weeks\" ng-repeat=\"row in rows track by $index\" role=\"row\">\n"

更改为

"<tr class=\"uib-weeks\" ng-repeat=\"row in rows track by $index\" role=\"row\" ng-hide=\"row[0].secondary && row[6].secondary\">\n"

row[0].secondary && row[6].secondary条件检查一周中的第一天和最后一天是否属于当月。

AngularJS中的5周datepicker

2 个答案: