### File

`src/components/fsdatepickertime/fsdatepickertime.component.ts`

### Implements

`OnInit` `OnChanges` `DoCheck`

### Metadata

selector | `fsDatePickerTime`
styleUrls | `fsdatepickertime.component.scss`
templateUrl | `./fsdatepickertime.component.html`

### Index

###### Properties
Public disabledGroupedMinutes Public disabledTimeHours Public disabledTimeMinutes Public element Public expanded Public fsDatePickerModel Public selected Public timeHoursCollapsed Public timeHoursExpanded Public timeMinutesCollapsed Public timeMinutesExpanded
###### Methods
addDisabledHours addDisabledMinutes checkDisabledTime createModel hourClick minuteClick ngDoCheck ngOnChanges ngOnInit setDate
###### Inputs
date disabledHours disabledMinutes disabledTimes
###### Outputs
onChange

### Constructor

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

### Inputs

`date` | Default value: `null`

`disabledHours` | Default value: `[]`

`disabledMinutes` | Default value: `[]`

`disabledTimes` | Default value: `[]`

### Outputs

`onChange` | `$event` type: `EventEmitter`

### Methods

addDisabledHours
`addDisabledHours(range: )`
Parameters :
Name | Type | Optional | Default value | Description
range |  | no | `` |
Returns : `void`

addDisabledMinutes
`addDisabledMinutes(range: )`
Parameters :
Name | Type | Optional | Default value | Description
range |  | no | `` |
Returns : `void`

checkDisabledTime
`checkDisabledTime()`
Returns : `void`

createModel
`createModel()`
Returns : `void`

hourClick
`hourClick(hour: )`
Parameters :
Name | Type | Optional | Default value | Description
hour |  | no | `` |
Returns : `void`

minuteClick
`minuteClick(minute: )`
Parameters :
Name | Type | Optional | Default value | Description
minute |  | no | `` |
Returns : `void`

ngDoCheck
`ngDoCheck()`
Returns : `void`

ngOnChanges
`ngOnChanges(changes: )`
Parameters :
Name | Type | Optional | Default value | Description
changes |  | no | `` |
Returns : `void`

ngOnInit
`ngOnInit()`
Returns : `void`

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

### Properties

Public disabledGroupedMinutes
`disabledGroupedMinutes: `object``
Type : `object`
Default value : `{}`

Public disabledTimeHours
`disabledTimeHours: `object``
Type : `object`
Default value : `{}`

Public disabledTimeMinutes
`disabledTimeMinutes: `object``
Type : `object`
Default value : `{}`

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

Public expanded
`expanded: ```
Default value : `false`

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

Public selected
`selected: `object``
Type : `object`
Default value : `{}`

Public timeHoursCollapsed
`timeHoursCollapsed: `[]``
Type : `[]`
Default value : `[ [ [0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11] ], [ [12, 13, 14, 15], [16, 17, 18, 19], [20, 21, 22, 23] ] ]`

Public timeHoursExpanded
`timeHoursExpanded: `[]``
Type : `[]`
Default value : `[[0,12],[1,13],[2,14],[3,15],[4,16],[5,17],[6,18],[7,19],[8,20],[9,21],[10,22],[11,23]]`

Public timeMinutesCollapsed
`timeMinutesCollapsed: `[]``
Type : `[]`
Default value : `[[0,5],[10,15],[20,25],[30,35],[40,45],[50,55]]`

Public timeMinutesExpanded
`timeMinutesExpanded: `[]``
Type : `[]`
Default value : `[ [0,1,2,3,4], [5,6,7,8,9], [10,11,12,13,14], [15,16,17,18,19], [20,21,22,23,24], [25,26,27,28,29], [30,31,32,33,34], [35,36,37,38,39], [40,41,42,43,44], [45,46,47,48,49], [50,51,52,53,54], [55,56,57,58,59] ]`

    <div class="time">
      <div class="wraper">
        <ng-container *ngIf="!expanded">
          <div class="hours-group">
            <div class="hours" *ngFor="let group of timeHoursCollapsed; let i = index">
              <div class="lbl">Hour {{ i ? 'PM' : 'AM' }}</div>
                <table>
                  <tr *ngFor="let hours of group">
                    <td *ngFor="let hour of hours" class="hour" (click)="hourClick(hour)" [ngClass]="{ disabled: disabledTimeHours[hour], selected: hour == selected.hour }">
                      <div class="number">
                        <span *ngIf="hour < 12">{{ hour ? hour : 12 }}<span class="am-pm">am</span></span>
                        <span *ngIf="hour >= 12">{{ hour==12 ? 12 : hour-12 }}<span class="am-pm">pm</span></span>
                      </div>
                    </td>
                </tr>
              </table>
            </div>
          </div>
          <div class="minutes">
            <div class="lbl">Minute</div>
            <table>
              <tr *ngFor="let minutes of timeMinutesCollapsed">
                <td *ngFor="let minute of minutes" class="minute"
                [ngClass]="{ disabled: disabledTimeMinutes[minute] || (disabledGroupedMinutes[selected.hour] && disabledGroupedMinutes[selected.hour][minute]), selected: minute == selected.minute }"
                (click)="minuteClick(minute)">
                  <div class="number">{{ minute }}</div>
                </td>
              </tr>
            </table>
            <a (click)="expanded = true" class="button-expand">More</a>
          </div>
        </ng-container>
        <ng-container *ngIf="expanded">
          <div class="hours">
            <div class="lbl">Hour</div>
              <table>
                <tr *ngFor="let hours of timeHoursExpanded">
                  <td *ngFor="let hour of hours" class="hour" (click)="hourClick(hour)" [ngClass]="{ disabled: disabledTimeHours[hour], selected: hour == selected.hour }">
                    <div class="number">
                      <span *ngIf="hour < 12">{{ hour ? hour : 12 }}<span class="am-pm">am</span></span>
                      <span *ngIf="hour >= 12">{{ hour==12 ? 12 : hour-12 }}<span class="am-pm">pm</span></span>
                    </div>
                  </td>
              </tr>
            </table>
          </div>
          <div class="minutes">

            <div class="lbl">Minute</div>
            <table>
              <tr *ngFor="let minutes of timeMinutesExpanded">
                <td *ngFor="let minute of minutes" class="minute"
                [ngClass]="{ disabled: disabledTimeMinutes[minute] || (disabledGroupedMinutes[selected.hour] && disabledGroupedMinutes[selected.hour][minute]), selected: minute == selected.minute }"
                (click)="minuteClick(minute)">
                  <div class="number">{{ minute }}</div>
                </td>
              </tr>
            </table>
            <a (click)="expanded = false" class="button-expand">Less</a>
          </div>
        </ng-container>

      </div>
    </div>

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""