ngx Bootstrap Datepicker 只允许一个月的第一天

Question

我只想选择每个即将到来的月份的第一天。 所有其他日子都应该被禁用。 因此，例如（今天是 01 Juli 2100），接下来的五个有效日期应该是：

1. 01.08.2100
2. 01.09.2100
3. 01.10.2100
4. 01.11.2100
5. 01.12.2100

HTML中的输入字段：

<input class="form-control" bsDatepicker placement="top" [bsConfig]="bsDatepickerConfig" [minDate]="minDate">

配置文件：

export const bsConfig = {
   dateInputFormat: 'DD.MM'YYYY',
   containerClass: 'theme-blue',
   showClearButton: true
}

最小日期：

minDate = new Date();

我必须向 bsConfig 添加什么？

Answer 1

您可以使用datesEnabled属性。 为每个月的第一个日期动态创建enabledDates数组

.TS

 enabledDates = [
    new Date('2020-02-06'),
    new Date('2020-02-08'),
    new Date('2020-02-11'),
 ];

.HTML

<input class="form-control" bsDatepicker [datesEnabled]="enabledDates" [bsConfig]="bsDatepickerConfig" >

Answer 2

由于没有针对我的要求的 ngx bootstrap datepicker 的确切解决方案，这就是我所做的。

一个 function 返回一个数组，每个月的第一天，从今天起两年。

function getDates(dateNumbers: number) {
  let dates: Date[] = [];
  let year: string = String(new Date().getFullYear());
  let month: string = String(new Date().getMonth() + 2);
  for (let i = 0; i < dateNumbers; i++) {
    if (month === '13') {
      year = String(Number(year) + 1);
      month = '01';
    }
    dates.push(utcZoned(new Date(`${year}-${month}-01`)));
    month = String(Number(month) + 1);
  }
  return dates;
}

在我的 component.ts 中，我调用了 function 并将日期存储在一个名为 enabledDates 的数组中。

const enabledDates = this.getDates(24);

在我的 component.html 中，我将 enabledDates 传递给 [datesEnabled]

<input
   class="form-control"
   type="text"
   bsDatepicker
   placement="top"
   [bsConfig]="bsDatepickerConfig"
   [datesEnabled]="enabledDates"
   id="id_name"
   formControlName="fc_name"
 />