Angular 8 - 如何使用 ngxbootstrap/datepicker 仅显示日期和月份

Question

我在项目中使用 ngx-bootstrap 日期选择器。

只需要选择日期和月份作为下面的图片/链接

Sample Image To show only date and month like this I needed

我搜索了很多，大多数示例都使用 BsDatePickerConfig 的 minMode 显示月份和年份。 我尝试将 minMode 设置为“day”。它显示正常的日/月/年日历视图。 但我只需要日期和月份，不需要年份

下面是我的代码：

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group">
    <input
      type="text"
      placeholder="Datepicker"
      [bsConfig]="datePickerConfig"
      class="form-control"
      bsDatepicker
    />
  </div>
</div>

和component.ts文件

  datePickerConfig: Partial<BsDatepickerConfig>;
  minMode: BsDatepickerViewMode = 'day';
  constructor() {
    this.datePickerConfig = Object.assign(
      {},
      {
        containerClass: 'theme-dark-blue',
        showWeekNumbers: false,
        minMode: this.minMode,
      }
    );
  }

有没有办法像我的问题一样配置 ngx-bootstrap 日期选择器？ 要么 建议任何允许此功能的替代日期选择器。

提前感谢您的宝贵时间...

Answer 1

您可以使用 Angular Material 及其日期选择器，您可以在其中使用具有自定义格式的自定义提供程序：显示和解析执行此任务。此处描述了更多详细信息（连同代码）：https://stackoverflow.com/a/58639587/14556461 它的堆栈闪电战就在这里：https://stackblitz.com/edit/angular-hw54xf.

在 ngx-bootstrap datepicker 中似乎没有直接的选项来执行此操作 - 您需要添加自定义 CSS 或 JS 以在日历中隐藏年份或通过删除适当的 DOM 元素将其完全删除。

---

更新：从评论中回答您的问题 - 我为您提供了一个使用 CSS 实现此效果的技巧。

将以下规则添加到组件的 CSS 文件中：

::ng-deep.bs-datepicker-head button.current:nth-child(3) {
  display: none;
}

它选择日历中带有年份的按钮并将其隐藏。

然后您还需要指定应显示哪一年的月份。假设您想要当前年份，您可以按以下方式执行此操作：

您的组件的 HTML：

<input
  type="text"
  #dp="bsDatepicker"
  bsDatepicker
  [(bsValue)]="chosenDate"
  [minDate]="minDate"
  [maxDate]="maxDate"
/>

您的组件的 TS：

export class AppComponent implements OnInit {
  chosenDate: Date;
  minDate: Date;
  maxDate: Date;

  ngOnInit() {
    const currentDate = new Date();
    this.minDate = new Date(currentDate.getFullYear(), 0, 1);
    this.maxDate = new Date(currentDate.getFullYear(), 11, 31);
  }
}

这样，您可以将只能选择的日期限制为当年的日期和月份。

请记住，这是一种 hack（解决方法），可能无法在未来的版本中使用，或者您可能需要对其进行调整以适应未来的版本。另外我建议改进 CSS 规则以避免使用 ::ng-deep，这是不推荐的，但它是单独的主题，您可以在其他地方找到有关此主题的更多信息，我只是想展示这个想法。

Sample Stackblitz：https://stackblitz.com/edit/stackoverflow-51062003-usatzk（我基于 ngx-bootstrap 的旧版本，而不是您可能使用的版本，因为我在 Stackblitz 上找到了一些 ngx-bootstrap datepicker 示例，所以我将它分叉并更改为显示此解决方案，但它在您的情况下应该是相同的代码或与这个非常相似）