Question

我正在使用Angular 7.2.15和ngx-bootstrap 4.1.1。我想为日期选择器设置最小日期和最大日期。输入字段还具有一个占位符，用于向用户显示日期格式，此处最初不应该设置日期，因此用户必须选择一个日期。

这个想法是，我们已经知道用户的年龄，因此我们希望将日期选择器限制为他/她的出生年月。

我遇到的问题是，当打开日期选择器时，它显示年份（最大日期）的12月。我想在datpicker中设置选定的日期/星期/月份，以避免显示12月。是否可以在日期选择器中设置日期，而不会影响输入字段的值？

HTML

<input type="text" placeholder="{{'DateFormat' | translate}}" class="form-control" id="birthdate" formControlName="birthdate"
[ngClass]="{ 'is-invalid': submitted && f.birthdate.errors }" bsDatepicker 
#dp="bsDatepicker" triggers=""   
               [bsConfig]="{ dateInputFormat: 'DD/MM/YYYY', showWeekNumbers: 
false, maxDate: maxdate, minDate: mindate}"                                      
                [maxDate]="maxdate" [minDate]="mindate" placement="right">

组件

...
if (this.age) {
        this.mindate = new Date();
        this.mindate.setFullYear(this.mindate.getFullYear() - this.age, 0, 1);
        this.maxdate = new Date();
        this.maxdate.setFullYear(this.maxdate.getFullYear() - this.age, 11, 31);
        this.selectedDate = this.mindate;
    }
...

    this.form = this.formBuilder.group({           
        birthdate: ['', [Validators.required, DateValidators.validateDateRange(this.mindate, this.maxdate)]],          
    });

...

validateDateRange是一个自定义方法，用于检查所选日期是否有效以及在提示日期和maxdate之间

Answer 1

在component.ts

中

minRange:Date[];

  ngOnInit() {

    this.mindate = new Date(2019 - this.age, 0, 1);
    this.maxdate = new Date(2019 - this.age, 11, 31);

    this.minRange = [this.mindate, this.maxdate];
  }

在HTML中，添加[(ngModel)]后，它对我有用

<input
    [className]="class"
    [id]="id"
    [name]="name"
    [value]="val"
    type="text"
    (input)="onChange($event.target.value)"
    (blur)="onTouched()"
    bsDaterangepicker
    triggers="keydown click"
    [formControl]="control"
    [(ngModel)]="minRange"
    [bsConfig]="{ containerClass : 'theme-default', rangeInputFormat: 'MMM DD, YYYY', maxDate: maxdate, minDate: mindate}"
  >

在nxg-bootstrap datepicker中设置可见日期

1 个答案: