Блог

Как ограничить тип средства выбора даты для примера начальной загрузки ngx, если я ввожу 25.04.199332132132, он действителен…. Я хочу ограничить, если вы введете 25.05.1993, весь лимит для года равен 4 числу…

         <input type="text" placeholder="04/25/1993" class="d-inline input-item form-control font-weight-bold text-center datepicker-input mrg "
          autocomplete="off" formControlName="date" aria-label="date" name="date"
          bsDatepicker [bsConfig]="{ isAnimated: true }"/>
  

Вы должны использовать свойства minDate и maxDate для этого компонента, как указано в документации:

HTML

 <div class="row">
  <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
    <input class="form-control"
           placeholder="Datepicker"
           ngModel
           bsDatepicker
           [minDate]="minDate"
           [maxDate]="maxDate">
  </div>
  <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
    <input class="form-control"
           placeholder="Daterangepicker"
           ngModel
           bsDaterangepicker
           [minDate]="minDate"
           [maxDate]="maxDate">
  </div>
</div>
  

TS

 import { Component } from '@angular/core';
 
@Component({
  selector: 'demo-datepicker-min-max',
  templateUrl: './min-max.component.html'
})
export class DemoDatepickerMinMaxComponent {
  minDate: Date;
  maxDate: Date;
 
  constructor() {
    this.minDate = new Date();
    this.maxDate = new Date();
    this.minDate.setDate(this.minDate.getDate() - 1);
    this.maxDate.setDate(this.maxDate.getDate()   7);
  }
}
  

Источник: https://valor-software.com/ngx-bootstrap/#/datepicker#min-max

в качестве способа добавьте readonly элемент ввода, чтобы его можно было выбрать только из средства выбора даты.

  <input type="text" placeholder="04/25/1993" class="d-inline input-item form-control font-weight-bold text-center datepicker-input mrg " readonly
          autocomplete="off" formControlName="date" aria-label="date" name="date"
          bsDatepicker [bsConfig]="{ isAnimated: true }"/>
  

или добавить onkeydown="this.value = (this.value.length > 9) ? this.value.slice(0, 9) : this.value;" , чтобы отключить более 10 символов