File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Constructor
constructor(utils: UtilsService, datePipe: DatePipe)
|
|
|
Parameters :
| Name |
Type |
Optional |
| utils |
UtilsService
|
No
|
| datePipe |
DatePipe
|
No
|
|
|
enableQuestionReadOut
|
Type : boolean
|
|
|
|
imageLocalCopyId
|
Type : string
|
|
|
Outputs
|
nextCallBack
|
Type : EventEmitter
|
|
|
|
previousCallBack
|
Type : EventEmitter
|
|
|
Methods
|
captureTime
|
captureTime()
|
|
|
|
|
|
checkForValidation
|
checkForValidation()
|
|
|
|
|
|
getFutureDate
|
getFutureDate()
|
|
|
|
|
|
next
|
next(status?: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| status |
string
|
Yes
|
|
import { Component, Input, EventEmitter, Output, OnInit } from '@angular/core';
import { UtilsService } from '@app/app/manage-learn/core';
import { DatePipe } from '@angular/common';
@Component({
selector: 'app-date-type-input',
templateUrl: './date-type-input.component.html',
styleUrls: ['./date-type-input.component.scss'],
})
export class DateTypeInputComponent implements OnInit {
@Input() data: any;
@Input() isLast: boolean;
@Input() isFirst: boolean;
@Output() nextCallBack = new EventEmitter();
@Output() previousCallBack = new EventEmitter()
@Input() evidenceId: string;
@Input() schoolId: string;
@Input() imageLocalCopyId: string;
@Input() generalQuestion: boolean;
@Input() submissionId: any;
@Input() inputIndex;
@Input() hideButton: boolean;
@Input() enableQuestionReadOut: boolean;
questionValid: boolean;
currentDate;
futureDate;
constructor(
private utils: UtilsService,
private datePipe: DatePipe
) {
this.getFutureDate();
}
next(status?: string) {
this.data.isCompleted = this.utils.isQuestionComplete(this.data);
if (!this.data.validation.required) {
this.data.isCompleted = true;
}
this.nextCallBack.emit(status);
}
captureTime(): void {
const parseString = this.data.dateFormat;
this.data.value = new Date(Date.now()).toISOString();
this.checkForValidation();
}
back() {
this.data.isCompleted = this.utils.isQuestionComplete(this.data);
this.previousCallBack.emit('previous');
}
canceled() {
}
ngOnInit() {
const dateTime = new Date();
this.data.validation.max = this.data.validation.max === "currentDate" ? new Date().toISOString().split('T')[0] : this.data.validation.max;
this.data.validation.min = this.data.validation.min === "currentDate" ? new Date().toISOString().split('T')[0] : this.data.validation.min;
this.checkForValidation();
this.data.startTime = this.data.startTime ? this.data.startTime : Date.now();
}
getFutureDate() {
let currentDate = new Date();
this.futureDate = currentDate.getFullYear() + 10
}
checkForValidation(): void {
this.data.isCompleted = this.utils.isQuestionComplete(this.data);
this.data.endTime = this.questionValid ? Date.now() : "";
}
}
<ion-card class="_cardBg ion-padding">
<ion-col class="_flex-box _justify-content-center _flex-direction-column">
<h4 [ngClass]="{'_validQuestion':( data?.value || !data?.validation?.required)}" class="flexbox">
<app-question-heading [inputIndex]="inputIndex" [data]="data" [enableQuestionReadOut]="enableQuestionReadOut">
</app-question-heading>
</h4>
</ion-col>
<div class="_tip _flex-box">{{data?.tip}}</div>
<div class="ion-margin-top" style="position: relative;">
<ion-item>
<ion-label floating>{{'FRMELEMENTS_LBL_DATE'| translate}}</ion-label>
<ion-datetime [disabled]="data?.autoCapture || (data.isEditable!=undefined && !data.isEditable)"
displayFormat="{{data?.dateFormat}}" *ngIf="data?.validation.max && !data?.validation.min"
[max]='data?.validation.max ? data?.validation.max : ""' (ionCancel)="canceled()" [(ngModel)]="data.value"
(ngModelChange)="checkForValidation()"></ion-datetime>
<ion-datetime [disabled]="data?.autoCapture || (data.isEditable!=undefined && !data.isEditable)"
displayFormat="{{data?.dateFormat}}" *ngIf="data?.validation.min && !data?.validation.max"
[min]='(data?.validation.min) ? data?.validation.min : ""' [max]="futureDate" (ionCancel)="canceled()"
[(ngModel)]="data.value" (ngModelChange)="checkForValidation()"></ion-datetime>
<ion-datetime [disabled]="data?.autoCapture || (data.isEditable!=undefined && !data.isEditable)"
displayFormat="{{data?.dateFormat}}" *ngIf="data?.validation.min && data?.validation.max"
[min]='(data?.validation.min) ? data?.validation.min : ""' (ionCancel)="canceled()" [(ngModel)]="data.value"
(ngModelChange)="checkForValidation()"></ion-datetime>
<ion-datetime [disabled]="data?.autoCapture || (data.isEditable!=undefined && !data.isEditable)"
displayFormat="{{data?.dateFormat}}" *ngIf="!data?.validation.min && !data?.validation.max"
(ionCancel)="canceled()" [(ngModel)]="data.value" [max]="futureDate" (ngModelChange)="checkForValidation()">
</ion-datetime>
</ion-item>
<ion-button icon-start clear class="capture ion-float-right custom-btn-txt-transform-none" (click)="captureTime()"
*ngIf="!data?.value && data?.autoCapture">
{{'FRMELEMENTS_LBL_CAPTURE'| translate}}
</ion-button>
<div style="width: 100%;">
<app-remarks *ngIf="data?.showRemarks" [data]="data"></app-remarks>
</div>
<app-image-upload [data]="data" [generalQuestion]="generalQuestion" [imageLocalCopyId]="imageLocalCopyId"
[evidenceId]="evidenceId" [submissionId]="submissionId"></app-image-upload>
</div>
</ion-card>
.capture {
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
Legend
Html element with directive