日期选择器 - 仅限年份

Question

我正在修改一个简单的日期选择器。

我只想使用年下拉列表（不需要月份）。

我试图通过添加 css:

来删除月份下拉列表

select.custom-select {
    display: none;
}

不幸的是，这不仅删除了月份下拉列表，还删除了年份，见下文：

请看STACKBLITZ

Answer 1

你可以给第一个添加样式select

@Component({
  selector: 'ngbd-datepicker-basic',
  templateUrl: './datepicker-basic.html',
  styles:[':host ::ng-deep select:first-child{display:none;}']
})
export class NgbdDatepickerBasic {
...
}

参考：https://stackblitz.com/edit/angular-year-datepicker-ng-bootstrap-kyjfjz

Answer 2

一个简单的解决方案是使用 css 使用 display:none

隐藏 ngb-datepicker-navigation-select 中的第一个 select 元素

工作示例：https://stackblitz.com/edit/angular-year-datepicker-ng-bootstrap-8ag1xe

Answer 3

最好使用的是来自 ngx-bootstrap 的 Datepicker。

看看这个 link： https://valor-software.com/ngx-bootstrap/#/datepicker#min-mode

它有一个名为 min-mode 的显示模式选项，因此您不能超出 that.You 可以根据您的情况将 min-mode 设置为 "year"。效果很好！

Answer 4

您只能对下面的 year.Try 代码使用 yyyy 格式。

$scope.dateOptions = {
    formatYear: 'yyyy',
    startingDay: 1,
    minMode: 'year'
};

工作演示http://plnkr.co/edit/0SPMYQ6ND7AOfZwDAFB8?p=preview

日期选择器 - 仅限年份

Datepicker - Year Only

css

datepicker

bootstrap-4

ng-bootstrap

angular