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

【问题标题】：Custom datepicker options in Angular JHipster projectAngular JHipster 项目中的自定义日期选择器选项
【发布时间】：2020-08-12 08:32:49
【问题描述】：

我是 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 中，这可以通过脚本标签内的 java 脚本来实现。

JHipster 中自定义的日期选择器在哪里？

【问题讨论】：

标签： angular datepicker jhipster

【解决方案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() 而不是时刻。我只是倾向于将时刻用于与日期相关的所有内容以保持一致性。

【讨论】：

【解决方案2】：

由于 JHipster 使用浏览器的日期选择器，因此不确定您想要实现的目标：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

type 属性可能会帮助您实现您想要的。

【讨论】：

所以听起来我必须集成一个第 3 方日期选择器。你有任何关于这样做的信息吗？