Angular JHipster项目中的自定义datepicker选项

问题描述

我是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标签内使用java脚本来实现。

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

解决方法

您不需要添加新的依赖项，因为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()代替矩。我只是倾向于在所有与日期相关的日期中使用“时刻”。

由于JHipster使用浏览器的日期选择器：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

，不确定要实现的目标是什么

type属性可以帮助您实现所需的目标。

angular datepicker datepicker jhipster