从 Angular-ui 引导日期选择器中删除周列和按钮

Posted 2023-05-07

【中文标题】从 Angular-ui 引导日期选择器中删除周列和按钮

【英文标题】：Remove week column and button from Angular-ui bootstrap datepicker

【发布时间】：2014-01-07 19:17:34

【问题描述】：

我正在使用angular-ui bootstrap datepicker。现在我需要从 datepicker 中删除 #(week) 列和 week 按钮。我的应用程序的多种形式都使用了这个日期选择器。我想从所有这些中删除周列。

为此，我已经全局配置了 datepickerConfig (show-weeks)，但它仍然无法正常工作。任何人都可以让我知道我做错了吗？

【参考方案1】：

请看这个例子：http://plnkr.co/edit/6i4G7JkvBiWXZYlrV2GL?p=preview

angular.module('app', ['ui.bootstrap'])
  .config(function (datepickerConfig) 
      datepickerConfig.showWeeks = false;
    );

【讨论】：

谢谢它的工作。你知道如何从底部隐藏只有几周的按钮吗？

我查看了 datepickerPopup 的源代码，没有办法做到这一点。您可以使用肮脏的 hack 和隐藏按钮与 css 代替，像这样：plnkr.co/edit/6i4G7JkvBiWXZYlrV2GL?p=preview ... 但这是一个非常肮脏的 hack %)

谢谢，我没问题。

【参考方案2】：

对于弹出窗口中的 datepicker，datepicker-options 属性的值 dateOptions 可以为任何 datepicker 设置添加 json，如下面的 html 所示。

<input type="text" class="form-control" datepicker-popup="format" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" **datepicker-options="dateOptions"** date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />

在 javascript 中这是给出的

 $scope.dateOptions = 
    formatYear: 'yy',
    startingDay: 1,
    
  ;

只需像这样在 dateOptions 中添加 showWeeks:false，

 $scope.dateOptions = 
    formatYear: 'yy',
    startingDay: 1,
    showWeeks:false
  ;

或者你可以像这样添加 'show-weeks':'false' 。 演示显示在 plunker [http://plnkr.co/edit/qbp3IObj13op2RS17IEg?p=preview][1]

【讨论】：

这应该是公认的答案，因为它只删除此日期选择器中的星期，而不是应用程序中的所有日期选择器。

感谢您的回答，我认为这是一个比已接受的答案更清洁的解决方案，但是 showWeeks:'false' 对我不起作用。我必须删除单引号，然后它才起作用。

Angular 1.5.6 我还必须删除单引号才能使其工作。

感谢您的帮助，但是没有单引号的解决方案是可行的。因此，showWeeks:false 可以代替 showWeeks:'false'。

【参考方案3】：

如果 angular bootstrap ui 版本为 0.14.3，请使用以下

app.config(function (uibDatepickerConfig) 
    uibDatepickerConfig.showWeeks = false;
    uibDatepickerConfig.showButtonBar = false;
);

【讨论】：

showButtonBar 在 PopupConfig 中设置：uibDatepickerPopupConfig.showButtonBar = false;

【参考方案4】：

如果您想直接在模板中进行，只需在输入中添加以下属性：show-weeks="false"。

【讨论】：

我一直在尝试使用 show-weeks 属性，但它似乎对我不起作用:(

好吧，我可以在工作中使用它，但我无法在文档的演示插件中重现。它适用于内联日历，但不适用于弹出窗口。它可能与这个问题有关：github.com/angular-ui/bootstrap/issues/1132 我会在星期一检查我的代码，看看我是怎么做到的。

这仅在您使用指令作为元素时才有效，例如 如果您使用的是

【参考方案5】：

要隐藏周数，您可以使用两种不同的方式。

第一个：添加到控制器中

$scope.dateOptions = 
    'year-format': "'yy'",
    'starting-day': 1   ;

或第二种方式：在输入字段中添加属性

show-weeks="'false'"

【讨论】：

这仅在您使用指令作为元素时才有效，例如 如果您使用的是