0
두 개의 캘린더가 하나의 양식에 있습니다. 하나는 시작 날짜이고 다른 하나는 종료 날짜입니다. 저는 'ng-pick-datetime'(https://www.npmjs.com/package/ng-pick-datetime)을 사용하여 크로스 브라우저 캘린더 피커를 사용하고 있습니다.각도 2의 날짜 피커에서 날짜 배열 비활성화
목표는 의 날짜를 1970 년 1 월 1 일부터 시작일 캘린더에서 선택한 날짜까지 차단하는 것입니다.
여기에있는 것은 종료일이 시작일 이후인지 확인하는 것입니다.
이렇게하려면 ng-pick-datetime 'picker에는 [disabledDates] 속성이 있습니다.이 속성은 선택할 수 없어야하는 날짜 배열을 기다리고 있습니다.
나는이 속성을 양식이 만들어 질 때 함수에서 만들어지는 금지 된 날짜 배열에 바인딩하고 끝 날짜 달력에 포커스가있을 때마다 바인딩합니다.
내 금지 된 배열을 인쇄하여 제대로 만들어 졌는지, 그리고 포함 된 날짜가 선택한 날짜와 시작 날짜 사이에 있는지 확인합니다. 이 부분이 잘 작동하는 것 같습니다.
브라우저 콘솔 오류가 발생하지 않습니다. 종료일 캘린더 선택기가 어떤 날짜도 차단하지 않도록하십시오.
이 내 템플릿 코드 :
<div class="input-control col-sm-6" [class.has-error]="startDate.invalid && startDate.dirty">
<label class="control-label" for="startDate">Starting Date *</label>
<owl-date-time
[(ngModel)]="data.startDate"
[dateFormat]="'DD-MM-YYYY'"
[inputId]="'startDate'"
[placeHolder]="'dd-mm-aaaa'"
[type]="'calendar'"
[dataType]="'date'"
[autoClose]="'true'"
id="startDate"
name="startDate"
#startDate="ngModel"
[disabled]="!paramsService.isSolicitante()"
[hideClearButton]
required>
</owl-date-time >
</div>
<div class="input-control col-sm-6" [class.has-error]="endDate.invalid && endDate.dirty">
<label class="control-label" for="endDate">Ending Date *</label>
<owl-date-time
[(ngModel)]="data.endDate"
[dateFormat]="'DD-MM-YYYY'"
[inputId]="'endDate'"
[placeHolder]="'dd-mm-aaaa'"
[type]="'calendar'"
[dataType]="'date'"
[autoClose]="'true'"
id="endDate"
name="endDate"
#endDate="ngModel"
[disabled]="!paramsService.isSolicitante()"
[hideClearButton]="!paramsService.isSolicitante()"
[disabledDates]="'forbiddenDates'"
(onFocus)="getForbiddenEndDates()"
required>
</owl-date-time >
</div>
//printing of selected date values:
<div class="col-sm-6">{{ data.startDate}}</div>
<div class="col-sm-6">{{ data.endDate}}</div>
{{ this.forbiddenDates }} //printing of the dates array to check it
그리고 이것은 여기에서 중요한 부분 만 구성 요소 코드 (타이프 라이터)입니다 :
forbiddenDates: Date[] = [];
ngAfterViewInit(): void { this.getForbiddenEndDates(); }
// This creates an array of Dates from the beginning of all times to the value of startDate
getForbiddenEndDates(): void {
let dateZero: Date = new Date(0);
let forbiddenDates: Date[] = [];
while (dateZero <= this.data.startDate){
forbiddenDates.push(new Date(dateZero));
dateZero.setDate(dateZero.getDate() + 1);
}
this.forbiddenDates = forbiddenDates;
}
Screenshot of the form and the forbidden dates array printed
