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

Question

我是JHipster的新手，正在学习它的结构和自定义方法。在一个组件视图中，我想知道在哪里修改生成的日期选择器，使其只允许选择落在星期一的日期，而不是全局修改。以下是生成的组件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 中，这可以通过 script 标签内的 JavaScript 实现。

在 JHipster 中，日期选择器是如何自定义的？

- Ray Bond

Answer 1

由于JHipster已经集成了ng-bootstrap，所以您无需添加新的依赖。

要启用ng-bootstrap日期选择器，您只需要更改以下内容：

<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()而不是moment。我只是倾向于在日期相关的所有事情上使用moment以保持一致性。

- vicpermir

Answer 2

不确定您想实现的是否可能，因为JHipster使用浏览器的日期选择器：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

type属性可能会帮助您实现所需的功能。

- Falydoor

---

听起来我需要集成第三方日期选择器。你有关于如何做到这一点的任何信息吗？ - Ray Bond