### File

`src/components/fsdatepicker/fsdatepicker.component.ts`

### Implements

`OnInit`

### Metadata

encapsulation | `ViewEncapsulation.None`
providers | `FsDatePickerModel`
selector | `fsDatePicker`
styleUrls | `../../styles.scss`
templateUrl | `./fsdatepicker.component.html`

### Index

###### Properties
Public calendarMonth Public element Public fsDatePickerModel Public model Public parentInstance
###### Methods
calendarDrawMonth close ngOnInit setComponents setDate setDateMode
###### HostListeners
document:keydown

### Constructor

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

### HostListeners

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

### Methods

calendarDrawMonth
`calendarDrawMonth(date: )`
Parameters :
Name | Type | Optional | Default value | Description
date |  | no | `` |
Returns : `void`

close
`close($event?: )`
Parameters :
Name | Type | Optional | Default value | Description
$event |  | yes | `` |
Returns : `void`

ngOnInit
`ngOnInit()`
Returns : `void`

setComponents
`setComponents(data: )`
Parameters :
Name | Type | Optional | Default value | Description
data |  | no | `` |
Returns : `void`

setDate
`setDate(date: )`
Parameters :
Name | Type | Optional | Default value | Description
date |  | no | `` |
Returns : `void`

setDateMode
`setDateMode(mode: )`
Parameters :
Name | Type | Optional | Default value | Description
mode |  | no | `` |
Returns : `void`

### Properties

Public calendarMonth
`calendarMonth: `null``
Type : `null`
Default value : `null`

Public element
`element: `ElementRef``
Type : `ElementRef`

Public fsDatePickerModel
`fsDatePickerModel: `FsDatePickerModel``
Type : `FsDatePickerModel`

Public model
`model: `null``
Type : `null`
Default value : `null`

Public parentInstance
`parentInstance: `any``
Type : `any`
Default value : `null`

    <div class="fs-datetime-backdrop" [hidden]="!parentInstance.opened" (click)="close($event)"></div>

    <div class="fs-datetime-dialog {{ 'dialog-view-' + fsDatePickerModel.view }}" tabindex="0"
    [ngClass]="{ opened: parentInstance.opened,
      'has-date': fsDatePickerModel.components.calendarStart,
      'has-time': fsDatePickerModel.components.timeStart,
      'date-mode-date': fsDatePickerModel.dateMode === 'date',
      'date-mode-month': fsDatePickerModel.dateMode === 'month',
      'date-mode-year': fsDatePickerModel.dateMode === 'year'
     }">
      <div class="wrap">

        <div *ngIf="fsDatePickerModel.dateMode === 'date'" class="header">
          <fsDatePickerSummary
          [startDate]="model"
          (componentsChange)="setComponents($event)"
          ></fsDatePickerSummary>

          <fsDatePickerPresets
          *ngIf="!fsDatePickerModel.components.timeStart"
          (datesChange)="setDate($event)"
          ></fsDatePickerPresets>
        </div>

        <div class="date-time">
          <fsDatePickerCalendar
            *ngIf="fsDatePickerModel.components.calendarStart"
            [date]="model"
            [drawMonth]="calendarMonth"
            [dateMode]="fsDatePickerModel.dateMode"
            (onChange)="setDate($event)"
            (onDateModeChange)="setDateMode($event)"
            (onDrawMonth)="calendarDrawMonth($event)"
          ></fsDatePickerCalendar>

          <fsDatePickerTime
            *ngIf="fsDatePickerModel.components.timeStart"
            [date]="model"
            (onChange)="setDate($event)"
          ></fsDatePickerTime>

        </div>

        <!-- Done button showing on Time Picker or Date Time picker on calendar mode -->
        <div class="done"
        *ngIf="fsDatePickerModel.view === 'time' ||
              (fsDatePickerModel.view === 'datetime' && fsDatePickerModel.dateMode === 'date')">
          <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 ""