如何删除 ui bootstrap datepicker 页脚 angularjs

Posted 2023-02-19

【中文标题】如何删除 ui bootstrap datepicker 页脚 angularjs

【英文标题】：How to remove ui bootstrap datepicker footer angularjs

【发布时间】：2013-10-02 13:34:10

【问题描述】：

注意：您可以在这篇文章中找到答案：Remove footer from angular ui bootstrap date picker

我正在使用 ui-bootstrap datapicket 作为出生日期字段。如下

<input type="text" data-datepicker-popup="dd-MMMM-yyyy" data-show-weeks="false" data-ng-model="model.dateOfBirth" id="dateOfbirth" name="dateOfBirth">

它工作正常。如下图

所以我的问题是如何隐藏日期选择器的页脚？？

提前谢谢..

【参考方案1】：

您可以在全局范围内执行此操作，如下所示：

myApp.config(function (datepickerConfig, datepickerPopupConfig) 
    // datepickerConfig.showWeeks = false;
    // datepickerPopupConfig.toggleWeeksText = null;
    datepickerPopupConfig.showButtonBar = false;
);

或者您可以为日期选择器的特定实例执行此操作，如下所示：

<input type="text" ng-model="dt" show-button-bar="false" />

【讨论】：

感谢特定的日历隐藏按钮栏。你节省了我的时间:-)

对于较新版本的 ui bootstrap，注入 uibDatepickerPopupConfig

【参考方案2】：

寻找相同的，我找到了这个答案：

Remove week column and button from Angular-ui bootstrap datepicker

所以：

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

【参考方案3】：

如果您下载“ui-bootstrap-tpls-[version].min.js”文件，则该指令的模板包含在 JS 中。

可能很难修改缩小版，因此您可能需要查看未缩小版。

但基本上你正在寻找找到@https://github.com/angular-ui/bootstrap/blob/master/template/datepicker/popup.html的HTML代码

一旦你在你的 JS 文件中找到那个位，就可以随意修改它。

【讨论】：

嘿迈克。谢谢回复。我会试试的。

【参考方案4】：

这是一个糟糕的解决方案，但我没有看到可能的解决方案in the documentation。 您可以通过这种方式使用 CSS 隐藏它们：

[ng-controller="DatepickerDemoCtrl"] > hr ~ button display:none

当你还想隐藏<hr>时：

[ng-controller="DatepickerDemoCtrl"] > hr display:none

用您的控制器替换 DatepickerDemoCtrl。

【讨论】：

嗨。感谢您的解决方案。使用 CSS 我们可以隐藏它。但是我正在搜索是否有像 show-footer="false" 这样的属性。但是文档中没有提到这样的属性。 :-(。所以 CSS 是隐藏它的唯一方法。:-)

【参考方案5】：

你的问题很简单。您可以在角度引导模块中修改 datepickerPopupWrap 指令。 您可以找到一个 templateUrl 字段。像这样的

templateUrl:template/datepicker/popup.html,

只需将该字段替换为 模板：

        ^<ul class=\^dropdown-menu\^ ng-style=\^display: (isOpen && 'block') || 'none', top: position.top+'px', left: position.left+'px'\^ class=\^dropdown-menu\^>\n^ +
        ^   <li ng-transclude></li>\n^ +
        ^</ul>^,

注意：将 ^ 替换为 " 。由于 *** 将其作为块引用，因此我使用了 ^。

---

模板字段定义如何在浏览器中显示输出。您甚至可以包含自己的元素并根据需要进行修改。

【讨论】：

我收到一些语法错误：错误：模板必须只有一个根元素。是：^ ^ + ^ ^ + ^^