установить видимую дату в nxg-bootstrap datepicker - PullRequest
Новая
       31

установить видимую дату в nxg-bootstrap datepicker

0 голосов
/ 11 июня 2019

Я использую Angular 7.2.15 и ngx-bootstrap 4.1.1. Я хочу установить минимальную дату и максимальную дату для выбора даты. поле ввода также имеет заполнитель для отображения пользователю формата даты, здесь не следует изначально устанавливать дату, поэтому пользователь вынужден выбирать ее.

Идея состоит в том, что мы уже знаем возраст пользователя, поэтому мы хотим ограничить сборщик дат его / ее годом рождения.

Проблема, с которой я столкнулся, заключается в том, что при открытии средства выбора даты отображается декабрь года (максимального значения). Я хотел бы установить выбранную дату / неделю / месяц в сборщике данных, чтобы не показывать декабрь. Можно ли установить дату в указателе даты, не влияя на значение поля ввода?

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 - это пользовательский метод, который проверяет, является ли выбранная дата действительной и находится ли она между mindate и maxdate

1 Ответ

0 голосов
/ 11 июня 2019

В 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}"
  >
...