@firestitch/datepicker documentation
  1. Components
  2. FsDatePickerTimeComponent

File

src/components/fsdatepickertime/fsdatepickertime.component.ts

Implements

OnInit OnChanges DoCheck

Metadata

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

Index

Properties
Methods
Inputs
Outputs

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