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>

从组件.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中定制的日期选择器在哪里？

Answer 1

您不需要添加新的依赖项，因为JHipster已经集成了ng引导。

要启用ng引导程序日期选择器，您只需更改以下内容：

<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。我只是倾向于用"时刻"来表示与日期相关的一切，以保持一致性。

Answer 2

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

type属性可能有助于实现您想要的目标。