File
projects/congarevenuecloud/elements/src/lib/input-date/input-date.component.ts
Description
The date range component includes two date input fields one for start date and one for end date. The input fields use the ngx-bootstrap date picker component.
By default the date range component will calculate the begining and ending date for the cart item that is passed to it based on the frequency and term of the product. When the user selects a date in the start date or end date inputs the onStartDateChange and onEndDateChange methods will be fired respectively.
Preview
Usage
Example :import { InputDateModule } from '@congarevenuecloud/elements';
@NgModule({
imports: [InputDateModule, ...]
})
export class AppModule {}// Basic Usage.
```typescript
<apt-date-range-input
[cartItem]="item"
(onStartDateChange)="handleStartChange($event, item)"
(onEndDateChange)="handleEndDateChange($event, item)"
></apt-date-range-input>// Implementation with custom options.
```typescript
<apt-date-range-input
(onStartDateChange)="handleStartChange($event, item)"
(onEndDateChange)="handleEndDateChange($event, item)"
[cartItem]="item"
[disableStartDate]="disableStartDate"
[disableEndDate]="disableEndDate"
[readonly]="false"
></apt-date-range-input>
Implements
OnChanges
OnDestroy
Metadata
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | apt-date-range-input |
| styleUrls | ./input-date.component.scss |
| templateUrl | ./input-date.component.html |
Index
Inputs |
Outputs |
Constructor
constructor(cartItemService: CartItemService, sanitizer: DomSanitizer)
|
|||||||||
|
Parameters :
|
Inputs
| cartItem |
Type : CartItem
|
|
The cart item associated with the date range picker. |
| disableEndDate |
Type : boolean
|
Default value : false
|
|
Flag to disable the end date input. |
| disableStartDate |
Type : boolean
|
Default value : false
|
|
Flag to disable the start date input. |
| displayDate |
Type : "StartDate" | "EndDate" | "Both"
|
|
Flag to display a particular date. |
| readonly |
Type : boolean
|
Default value : false
|
|
Flag to check if this component should be read only. |
| small |
Type : boolean
|
Default value : false
|
|
Flag to apply small class on input field. |
Outputs
| onEndDateChange |
Type : EventEmitter<any>
|
|
Event emitter that fires when the end date input is changed. |
| onStartDateChange |
Type : EventEmitter<any>
|
|
Event emitter that fires when start date input is changed. |
<div class="date-range-container" [ngClass]="small ? 'd-flex' : ' form-group align-items-center'">
<div [ngClass]="small ? 'col-md-6' : ''" *ngIf="displayDate!=='EndDate'" class="position-relative">
<apt-output-field [record]="cartItem" class="StartDate" field="StartDate" [labelOnly]="true" [labelClass]="'mb-1'">
</apt-output-field>
<input type="text" id="startDate" class="form-control" #startDateTemplate="bsDatepicker" [minDate]="startDate"
bsDatepicker [(ngModel)]="startDate" [bsConfig]="bsConfig" (ngModelChange)="startDateChange(startDate)"
[disabled]="disableStartDate || readonly" [readonly]="readonly" [class.form-control-sm]="small">
<i class="fa fa-calendar pr-2 mb-3 position-absolute"></i>
</div>
<div [ngClass]="small ? 'col-md-6' : ''" *ngIf="displayDate!=='StartDate'" class="position-relative">
<apt-output-field [record]="cartItem" class="EndDate" field="EndDate" [labelOnly]="true" [labelClass]="'mb-1'">
</apt-output-field>
<input type="text" id="endDate" class="form-control" #endDateTemplate="bsDatepicker" [minDate]="startDate"
bsDatepicker [(ngModel)]="endDate" [bsConfig]="bsConfig" (ngModelChange)="endDateChange(endDate)"
[disabled]="disableEndDate || readonly" [readonly]="readonly" [class.form-control-sm]="small">
<i class="fa fa-calendar pr-2 mb-3 position-absolute"></i>
</div>
</div>
./input-date.component.scss
.date-range-container > div {
i {
top: 61%;
right: 5%;
}
.form-control {
font-size: inherit !important;
}
}