angular - Angular JHipster 项目中的自定义日期选择器选项

Question

我是 JHipster 的新手，正在学习它的结构和定制方式。

不是全局的，而是仅在一个组件 View 中我想知道在哪里修改生成的日期选择器，在这种情况下只允许选择属于星期一的日期。

生成的组件html:

<div class="form-group">
    <label class="form-control-label" jhiTranslate="deploymentApp.plan.startDate" for="field_startDate">Start Date</label>
    <div class="d-flex">
         <input id="field_startDate" type="datetime-local" class="form-control" name="startDate" formControlName="startDate" placeholder="YYYY-MM-DD HH:mm"/>
    </div>
</div>

来自 component.ts。唯一与日期相关的代码块:

ngOnInit(): void {
this.activatedRoute.data.subscribe(({ plan }) => {
  if (!plan.id) {
    const today = moment().startOf('day');
    plan.startDate = today;
  }

  this.updateForm(plan);

  this.areaService.query().subscribe((res: HttpResponse<IArea[]>) => (this.areas = res.body || []));
  });
}

在 Javascript/HTML 中，这可以通过脚本标签内的 java 脚本来实现。

JHipster中自定义的datepicker在哪里？

Answer 1

您不需要添加新的依赖项，因为 JHipster 已经集成了 ng-bootstrap .

要启用 ng-bootstrap datepicker，您只需更改以下内容:

<input id="field_startDate" type="datetime-local" class="form-control" name="startDate" 
       formControlName="startDate" placeholder="YYYY-MM-DD HH:mm"/>

进入这个:

<input id="field_startDate" class="form-control" name="startDate" 
       formControlName="startDate" placeholder="YYYY-MM-DD"
       ngbDatepicker #d="ngbDatepicker" (click)="d.toggle()" [markDisabled]="markDisabled"/>

如果您注意到我添加了一个指向同名函数的“markDisabled”属性，那么在您的组件 TS 文件中您需要添加如下内容:

markDisabled(date: NgbDate): boolean {
  const dateMoment = moment(date.year + '-' + date.month + '-' + date.day, 'YYYY-MM-DD');
  return dateMoment.isoWeekday() !== 7;
}

由于 moment.isoWeekday() 返回一个数字 [1-7] 作为星期几，因此应该禁用除星期一以外的所有日期。

还有许多其他方法可以做到这一点，例如你可以使用 NgbCalendar.getWeekday() 而不是时刻。为了保持一致性，我只是倾向于将时刻用于与日期相关的所有内容。