【问题标题】:NgbDatepicker show months and years onlyNgbDatepicker 仅显示月份和年份
【发布时间】:2017-05-30 16:20:27
【问题描述】:

我正在使用由 Angular 4 提供支持的 Bootstrap 4 组件开发应用程序,但我无法将 NgbDatepicker 指令配置为仅显示月份和年份,而不是日期 - 就像信用卡一样。

我只想选择月份和年份,我不在乎选择特定的日期。

我的输入如下所示:

我尝试了此处列出的指令的所有属性

https://ng-bootstrap.github.io/#/components/datepicker

但他们似乎都没有帮助我。 有什么想法吗?

【问题讨论】:

    标签: angular ng-bootstrap


    【解决方案1】:

    没有对它的原生支持,但您可以使用 css 和 navigate 事件来帮助自己。它不是超级好,但它很实用。

    <ngb-datepicker (navigate)="dateNavigate($event)" [showWeekdays]="false" class="datepicker-only-month-select"></ngb-datepicker>

    在您的组件中,您可以捕获导航事件,该事件包含以前的值和新值:

    dateNavigate($event: NgbDatepickerNavigateEvent) { console.log($event.next.month); console.log($event.next.year); ... // old value is contained in $event.current }

    最后在全局范围的 CSS 中,您可以隐藏日历(并添加更多所需的样式):

    .datepicker-only-month-select { border: 0 !important; .ngb-dp-months { display: none !important; } }

    【讨论】:

      【解决方案2】:

      有一个要求:

      https://github.com/ng-bootstrap/ng-bootstrap/issues/1811

      截至目前(2020 年 2 月),尚不支持此功能。

      【讨论】:

        【解决方案3】:

        https://ng-bootstrap.github.io/#/components/datepicker 的现有实现不支持选择月份 + 年份 - 它是一个日期选择器。

        您可以尝试在https://github.com/ng-bootstrap/ng-bootstrap/issues 中打开功能请求

        【讨论】:

          猜你喜欢
          • 2015-08-17
          • 2018-06-28
          • 2011-06-11
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多