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

Question

我在项目中使用了ngx-bootstrap datepicker

只需要选择日期和月份如下image/link

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

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

下面是我的代码：

<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 及其日期选择器，您可以在其中使用具有自定义格式的自定义提供程序：显示和解析来执行此任务。此处描述了更多详细信息（以及代码）：它的 stackblitz 在这里：https://stackblitz.com/edit/angular-hw54xf.

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

更新：通过评论回答您的问题 - 我为您提供了一个使用 CSS 如何实现此效果的 hack。

将以下规则添加到组件的 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，这是不推荐的，但它是一个单独的主题，您可以在其他地方找到关于该主题的更多信息，我只是想展示这个想法。

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

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

Angular 8 - How to show only date and month using ngxbootstrap/datepicker

angular

datepicker

ngx-bootstrap