angular中日期区间组件

Question

例如这种形式的日期区间选择器，想实现以下条件，如何设置呢？
1、只能选择当前时间之后的时间。
2、时间区间只能选择七天，不能多，不能少。
3、不可选择如[2023-1-2～2021-1-8,2023-1-16～2021-1-22]这两个不连续的时间段

<input [owlDateTimeTrigger]="dt" [owlDateTime]="dt"
       [min]="min" [max]="max" [selectMode]="'range'"/>
<owl-date-time [picekerType]="'calendar'" #dt></owl-date-time>

Answer 1

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import * as moment from 'moment';

@Component({
  selector: 'app-date-range-picker',
  template: `
    <input [owlDateTimeTrigger]="dt" [owlDateTime]="dt" [min]="minDate" [max]="maxDate" [selectMode]="'range'" [(ngModel)]="dateRange"/>
    <owl-date-time [pickerType]="'calendar'" #dt></owl-date-time>
  `,
  styles: []
})
export class DateRangePickerComponent {
  minDate = moment();  // 设置最小日期为当前日期
  maxDate = moment().add(7, 'days');  // 设置最大日期为当前日期加7天
  dateRange = new FormControl();

  constructor() { }

  // 在选择开始时间后，设置结束时间的最小值为开始时间加一天
  onStartDateSelected(startDate: moment.Moment) {
    this.minDate = startDate.add(1, 'day');
  }
}