Angular 8如何使用ngx-bootstrap/datepicker仅实现日期和月份选择

官方配置支持说明 #

ngx-bootstrap datepicker目前无官方配置可直接实现隐藏年份、仅保留月日选择的需求。你使用的minMode参数作用是控制日期选择的最小层级，并非控制上层视图显隐，因此设置为day无法达到预期效果。

兼容方案（基于现有ngx-bootstrap组件） #

如果不希望更换组件，可通过CSS样式覆盖的方式实现需求，操作如下：

1. 保留现有业务代码，在当前组件样式文件或全局样式文件中添加如下样式：

/* 隐藏日历头部的年份展示，写在全局样式时可去掉::ng-deep前缀 */
::ng-deep .theme-dark-blue .bs-datepicker-head .current-year {
  display: none;
  pointer-events: none;
}
/* 隐藏视图切换栏的年份选项，禁止切换到年视图，写在全局样式时可去掉::ng-deep前缀 */
::ng-deep .bs-datepicker-navigation-view button[data-view="year"] {
  display: none;
}

2. 业务侧提交数据时，可根据需求将选中日期的年份统一替换为固定值（如当前年、业务指定默认年）即可。

注意：该方案为样式hack，升级ngx-bootstrap版本后需验证DOM结构变化后样式是否仍然生效。

替代组件推荐 #

如果不想使用hack方式，可选择以下Angular生态的日期组件，均原生支持灵活配置实现仅月日选择的需求：

• Angular Material Datepicker：支持自定义日历头部、视图过滤，可灵活隐藏年份交互入口
• PrimeNG Calendar：提供多维度视图配置和自定义模板能力，可直接限制可选视图仅保留月、日两级
• ng-zorro-antd DatePicker：支持自定义面板渲染，通过配置参数即可快速实现仅月日选择效果

内容的提问来源于stack exchange，提问作者ArumugaRaja