### 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
Public element Public endCalendarMonth Public fsDatePickerModel Public highlightEndDate Public highlightStartDate parentInstance Public startCalendarMonth Public toDisabledDays Public toDisabledTimes
###### Methods
calendarsDrawMonth close endCalendarDrawMonth hoverCalendar ngDoCheck ngOnInit onDatesChange onMouseLeaveCalendar setComponents setDateModeEnd setDateModeStart setDates setEndDate setEndTime setStartDate setStartTime startCalendarDrawMonth toDisabledDaysUpdate toDisabledTimesUpdate
###### HostListeners
document:keydown

### 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 ""