@firestitch/datepicker documentation
  1. Components
  2. FsDatepickerSummaryComponent

File

src/components/fsdatepickersummary/fsdatepickersummary.component.ts

Implements

OnInit OnChanges

Metadata

selector fsDatePickerSummary
styleUrls fsdatepickersummary.component.scss
templateUrl ./fsdatepickersummary.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(fsDatePickerCommon: FsDatePickerCommon, fsDatePickerModel: FsDatePickerModel)
Parameters :
Name Type Optional Description
fsDatePickerCommon FsDatePickerCommon no
fsDatePickerModel FsDatePickerModel no

Inputs

endDate

Default value: null

startDate

Default value: null

Outputs

componentsChange $event type: EventEmitter

Methods

ngOnChanges
ngOnChanges(changes: )
Parameters :
Name Type Optional Default value Description
changes no
Returns : void
ngOnInit
ngOnInit()
Returns : void
onComponentsChange
onComponentsChange(view: )
Parameters :
Name Type Optional Default value Description
view no
Returns : void

Properties

Public formattedEndDate
formattedEndDate: null
Type : null
Default value : null
Public formattedStartDate
formattedStartDate: null
Type : null
Default value : null
Public fsDatePickerModel
fsDatePickerModel: FsDatePickerModel
Type : FsDatePickerModel 
<div *ngIf="formattedStartDate || formattedEndDate" class="summary">
  <ng-container *ngIf="formattedStartDate">
    <div
      (click)="onComponentsChange({ calendarStart: true, calendarEnd: true })"
      [ngClass]="{ active: fsDatePickerModel.components.calendarStart }">{{ formattedStartDate.date }}
    </div>
    <div
      (click)="onComponentsChange({ timeStart: true })"
      [ngClass]="{ active: fsDatePickerModel.components.timeStart }">{{ formattedStartDate.time }}
    </div>
  </ng-container>
  <ng-container *ngIf="formattedStartDate && formattedEndDate">&nbsp;-&nbsp;</ng-container>
  <ng-container *ngIf="formattedEndDate">
    <div
      (click)="onComponentsChange({ calendarStart: true, calendarEnd: true })"
      [ngClass]="{ active: fsDatePickerModel.components.calendarEnd }">{{ formattedEndDate.date }}
    </div>
    <div
      (click)="onComponentsChange({ timeEnd: true })"
      [ngClass]="{ active: fsDatePickerModel.components.timeEnd }">{{ formattedEndDate.time }}
    </div>
  </ng-container>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""