如何在 Angular 中选择一个日期时向 Bootstrap DatePicker 添加一天

Question

开发者好，我有两个用于用户 select 的输入 boostrap 日期选择器，我想如果第一个日期字段是 selected，下一个日期字段应该从一天开始开始日期最初 select 在第一个日期字段中编辑。这是我的第一个输入字段：

<input
  (blur)="setMinDate($event)"
  id="StartTime"
  type="text"
  name="StartTime"
  class="form-control"
  bsDatepicker
  datePickerLuxonModifier
  [(date)]="userFirstInput.startTime"
  [(ngModel)]="userFirstInput.startTime"
  [maxDate]="userFirstInput.endTime"
  [minDate]="startdate"
  [bsConfig]="{ adaptivePosition: true }"
  required
/>

这是第二个输入字段：

<input
  id="EndTime"
  type="text"
  name="EndTime"
  class="form-control"
  bsDatepicker
  datePickerLuxonModifier
  [(date)]="userSecondInput.endTime"
  [(ngModel)]="userSecondInput.endTime"
  [minDate]="minPickDate"
  [bsConfig]="{ adaptivePosition: true }"
  required
/>

函数正在第一个输入日期上应用，以存储第一个输入日期的日期选择并为其添加一天，这将用作第二个输入日期字段的 [minDate]:

minPickDate: DateTime;
    
setMinDate(event){
  this.minPickDate = this.userFirstInput.startTime.plus({days:1});
}

但是不起作用，我尝试使用 ngModelChange 和 Change 事件，但仍然没有成功。 拜托，我需要帮助。

Answer 1

尝试下面使用 bsValueChange，希望它对你有用

<input
  (bsValueChange)="setMinDate($event)"
  id="StartTime"
  type="text"
  name="StartTime"
  class="form-control"
  bsDatepicker
  datePickerLuxonModifier
  [(date)]="userFirstInput.startTime"
  [(ngModel)]="userFirstInput.startTime"
  [maxDate]="userFirstInput.endTime"
  [minDate]="startdate"
  [bsConfig]="{ adaptivePosition: true }"
  (bsValueChange)= "setMinDate($event)"
  required />

ts minPickDate : 日期;

 setMinDate(value){
    var nextDay = new Date(value);
    nextDay.setDate(nextDay.getDate() + 1);
    this.minPickDate = nextDay;
 }

如何在 Angular 中选择一个日期时向 Bootstrap DatePicker 添加一天

How to add one day to Bootstrap DatePicker when one date is pick in Angular

javascript

datepicker

typescript

bootstrap-datepicker

angular