File
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Accessors
|
|
|
|
isEmittingDateChange
|
Type : boolean
|
Default value : false
|
If set to true, the component will be reactive and will emit the updatedDate on every change.
Otherwise, the component will use a non emitting variant of a template.
|
|
showLabel
|
Type : boolean
|
Default value : true
|
Determines the display of from and to date picker labels.
|
Outputs
|
updatedDate
|
Type : EventEmitter<literal type>
|
Methods
|
onDateFromChange
|
onDateFromChange(dateFrom: string)
|
Parameters :
| Name |
Type |
Optional |
| dateFrom |
string
|
No
|
|
|
onDateToChange
|
onDateToChange(dateTo: string)
|
Parameters :
| Name |
Type |
Optional |
| dateTo |
string
|
No
|
|
|
Readonly
DATE_FROM
|
Type : string
|
Default value : 'dateFrom'
|
|
Readonly
DATE_TO
|
Type : string
|
Default value : 'dateTo'
|
|
Readonly
FROM_DATE
|
Default value : gettext('From`date`')
|
|
Readonly
HAS_ERROR
|
Type : string
|
Default value : 'has-error'
|
|
Readonly
INVALID_DATE_TIME
|
Type : string
|
Default value : 'invalidDateTime'
|
|
Readonly
THIS_DATE_IS_AFTER_THE_LAST_ALLOWED_DATE
|
Default value : gettext(
'This date is after the latest allowed date.'
)
|
|
Readonly
THIS_DATE_IS_BEFORE_THE_EARLIEST_ALLOWED_DATE
|
Default value : gettext(
'This date is before the earliest allowed date.'
)
|
|
Readonly
THIS_DATE_IS_INVALID
|
Default value : gettext('This date is invalid.')
|
|
Readonly
TO_DATE
|
Default value : gettext('To`date`')
|
Accessors
|
parentFormGroup
|
getparentFormGroup()
|
<div class="d-flex gap-8 a-i-center flex-wrap">
<c8y-form-group
[ngClass]="[
parentFormGroup?.controls.dateFrom.errors ? HAS_ERROR : '',
isEmittingDateChange ? 'd-flex a-i-center gap-4 m-b-0' : ''
]"
>
<ng-container *ngIf="showLabel">
<label
[title]="FROM_DATE | translate"
[for]="DATE_FROM"
>
{{ FROM_DATE | translate }}
</label>
</ng-container>
<c8y-date-time-picker
id="DATE_FROM"
[maxDate]="parentFormGroup?.value.dateTo"
[placeholder]="FROM_DATE | translate"
[formControl]="parentFormGroup?.controls.dateFrom"
[ngClass]="parentFormGroup?.controls.dateFrom.errors ? HAS_ERROR : ''"
(ngModelChange)="onDateFromChange($event)"
></c8y-date-time-picker>
<c8y-messages
class="text-nowrap"
[show]="parentFormGroup?.controls.dateFrom.errors"
>
<c8y-message
name="dateAfterRangeMax"
[text]="THIS_DATE_IS_AFTER_THE_LAST_ALLOWED_DATE | translate"
></c8y-message>
<c8y-message
name="INVALID_DATE_TIME"
[text]="THIS_DATE_IS_INVALID | translate"
></c8y-message>
</c8y-messages>
</c8y-form-group>
<c8y-form-group
[ngClass]="[
parentFormGroup?.controls.dateTo.errors ? HAS_ERROR : '',
isEmittingDateChange ? 'd-flex a-i-center gap-4 m-b-0' : ''
]"
>
<ng-container *ngIf="showLabel">
<label
[title]="TO_DATE | translate"
[for]="DATE_TO"
>
{{ TO_DATE | translate }}
</label>
</ng-container>
<c8y-date-time-picker
id="DATE_TO"
[minDate]="parentFormGroup?.value.dateFrom"
[placeholder]="TO_DATE | translate"
[formControl]="parentFormGroup?.controls.dateTo"
[ngClass]="parentFormGroup?.controls.dateTo.errors ? HAS_ERROR : ''"
(ngModelChange)="onDateToChange($event)"
></c8y-date-time-picker>
<c8y-messages [show]="parentFormGroup?.controls.dateTo.errors">
<c8y-message
name="dateBeforeRangeMin"
[text]="THIS_DATE_IS_BEFORE_THE_EARLIEST_ALLOWED_DATE | translate"
></c8y-message>
<c8y-message
name="INVALID_DATE_TIME"
[text]="THIS_DATE_IS_INVALID | translate"
></c8y-message>
</c8y-messages>
</c8y-form-group>
</div>