@firestitch/datepicker documentation
  1. Components
  2. FsDatepickerRangeComponent

File

src/components/fsdatepickerrange/fsdatepickerrange.component.ts

Implements

OnInit DoCheck

Metadata

encapsulation ViewEncapsulation.None
providers FsDatePickerModel
selector fsDatePickerRange
styleUrls ../../styles.scss
templateUrl ./fsdatepickerrange.component.html

Index

Properties
Methods
HostListeners

Constructor

constructor(fsDatePickerModel: FsDatePickerModel, fsDatePickerCommon: FsDatePickerCommon, element: ElementRef, _iterableDiffers: IterableDiffers)
Parameters :
Name Type Optional Description
fsDatePickerModel FsDatePickerModel no
fsDatePickerCommon FsDatePickerCommon no
element ElementRef no
_iterableDiffers IterableDiffers no

HostListeners

document:keydown
Arguments : '$event'
document:keydown(e: )

Methods

calendarsDrawMonth
calendarsDrawMonth(startDate: , endDate: )
Parameters :
Name Type Optional Default value Description
startDate no
endDate no
Returns : void
close
close($event?: )
Parameters :
Name Type Optional Default value Description
$event yes
Returns : void
endCalendarDrawMonth
endCalendarDrawMonth(date: )
Parameters :
Name Type Optional Default value Description
date no
Returns : void
hoverCalendar
hoverCalendar(day: )
Parameters :
Name Type Optional Default value Description
day no
Returns : void
ngDoCheck
ngDoCheck()
Returns : void
ngOnInit
ngOnInit()
Returns : void
onDatesChange
onDatesChange(data: )
Parameters :
Name Type Optional Default value Description
data no
Returns : void
onMouseLeaveCalendar
onMouseLeaveCalendar()
Returns : void
setComponents
setComponents(data: )
Parameters :
Name Type Optional Default value Description
data no
Returns : void
setDateModeEnd
setDateModeEnd(mode: )
Parameters :
Name Type Optional Default value Description
mode no
Returns : void
setDateModeStart
setDateModeStart(mode: )
Parameters :
Name Type Optional Default value Description
mode no
Returns : void
setDates
setDates(startDate: , endDate: )
Parameters :
Name Type Optional Default value Description
startDate no
endDate no
Returns : void
setEndDate
setEndDate(date: )
Parameters :
Name Type Optional Default value Description
date no
Returns : void
setEndTime
setEndTime(date: )
Parameters :
Name Type Optional Default value Description
date no
Returns : void
setStartDate
setStartDate(date: )
Parameters :
Name Type Optional Default value Description
date no
Returns : void
setStartTime
setStartTime(date: )
Parameters :
Name Type Optional Default value Description
date no
Returns : void
startCalendarDrawMonth
startCalendarDrawMonth(date: )
Parameters :
Name Type Optional Default value Description
date no
Returns : void
toDisabledDaysUpdate
toDisabledDaysUpdate(startDate: , endDate: )
Parameters :
Name Type Optional Default value Description
startDate no
endDate no
Returns : void
toDisabledTimesUpdate
toDisabledTimesUpdate(startDate: , endDate: )
Parameters :
Name Type Optional Default value Description
startDate no
endDate no
Returns : void

Properties

Public element
element: ElementRef
Type : ElementRef
Public endCalendarMonth
endCalendarMonth: null
Type : null
Default value : null
Public fsDatePickerModel
fsDatePickerModel: FsDatePickerModel
Type : FsDatePickerModel
Public highlightEndDate
highlightEndDate: null
Type : null
Default value : null
Public highlightStartDate
highlightStartDate: null
Type : null
Default value : null
parentInstance
parentInstance: any
Type : any
Default value : null
Public startCalendarMonth
startCalendarMonth: null
Type : null
Default value : null
Public toDisabledDays
toDisabledDays: []
Type : []
Default value : []
Public toDisabledTimes
toDisabledTimes: []
Type : []
Default value : [] 
<div class="fs-datetime-backdrop" [hidden]="!parentInstance.opened" (click)="close($event)"></div>

<div class="fs-datetime-dialog fs-datetime-range dialog-view-{{ fsDatePickerModel.view }}" tabindex="0"
[ngClass]="{ opened: parentInstance.opened,
  'has-date': (fsDatePickerModel.components.calendarStart || fsDatePickerModel.components.calendarEnd),
  'has-time': (fsDatePickerModel.components.timeStart || fsDatePickerModel.components.timeEnd) }">
  <div class="wrap">

    <div class="header">
      <fsDatePickerSummary
      [startDate]="parentInstance.ngModelStart"
      [endDate]="parentInstance.ngModelEnd"
      (componentsChange)="setComponents($event)"
      ></fsDatePickerSummary>
      <fsDatePickerPresets
      *ngIf="!fsDatePickerModel.components.timeStart && !fsDatePickerModel.components.timeEnd"
      (datesChange)="onDatesChange($event)"
      ></fsDatePickerPresets>
    </div>

    <div class="date-time">
      <div class="date-range">
          <fsDatePickerCalendar
          *ngIf="fsDatePickerModel.components.calendarStart"
          [date]="parentInstance.ngModelStart"
          [highlightStartDate]="highlightStartDate"
          [highlightEndDate]="highlightEndDate"
          [dateMode]="fsDatePickerModel.dateMode.start_date"
          [drawMonth]="startCalendarMonth"
          (onChange)="setStartDate($event)"
          (onDateModeChange)="setDateModeStart($event)"
          (onDrawMonth)="startCalendarDrawMonth($event)"
          (hoverDay)="hoverCalendar($event)"
          (mouseLeaveCalendar)="onMouseLeaveCalendar($event)"
          ></fsDatePickerCalendar>

          <fsDatePickerCalendar
          *ngIf="fsDatePickerModel.components.calendarEnd"
          [date]="parentInstance.ngModelEnd"
          [highlightStartDate]="highlightStartDate"
          [highlightEndDate]="highlightEndDate"
          [dateMode]="fsDatePickerModel.dateMode.end_date"
          [disabledDays]="toDisabledDays"
          [drawMonth]="endCalendarMonth"
          (onChange)="setEndDate($event)"
          (onDateModeChange)="setDateModeEnd($event)"
          (onDrawMonth)="endCalendarDrawMonth($event)"
          (hoverDay)="hoverCalendar($event)"
          (mouseLeaveCalendar)="onMouseLeaveCalendar($event)"
          ></fsDatePickerCalendar>
      </div>

      <div class="time-range">
        <fsDatePickerTime
          *ngIf="fsDatePickerModel.components.timeStart"
          [date]="parentInstance.ngModelStart"
          (onChange)="setStartTime($event)"
        ></fsDatePickerTime>
        <fsDatePickerTime
          *ngIf="fsDatePickerModel.components.timeEnd"
          [date]="parentInstance.ngModelEnd"
          [disabledTimes]="toDisabledTimes"
          (onChange)="setEndTime($event)"
        ></fsDatePickerTime>
      </div>

    </div>

    <div class="done">
      <button type="button" mat-raised-button color="primary" (click)="close($event)">Done</button>
    </div>
  </div>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""