angular-material-app documentation
  1. Components
  2. DatePickerComponent

File

src/app/component/date-picker/date-picker.component.ts

Metadata

encapsulation ViewEncapsulation.None
selector stbui-date-picker
styleUrls ./date-picker.component.scss
templateUrl ./date-picker.component.html

Index

Properties
Methods
Inputs
Outputs
Accessors

Constructor

constructor()
Defined in src/app/component/date-picker/date-picker.component.ts:44

Inputs

action
Type : boolean
Default value : false
Defined in src/app/component/date-picker/date-picker.component.ts:24
mode
Defined in src/app/component/date-picker/date-picker.component.ts:27

Outputs

onCanel
Type : EventEmitter
Defined in src/app/component/date-picker/date-picker.component.ts:42
onConfirm
Type : EventEmitter
Defined in src/app/component/date-picker/date-picker.component.ts:43
selectValueChange
Type : EventEmitter
Defined in src/app/component/date-picker/date-picker.component.ts:44

Methods

onCancelDatePicker
onCancelDatePicker(value)
Defined in src/app/component/date-picker/date-picker.component.ts:48
Parameters :
Name Optional
value No
Returns : void
onConfirmDatePicker
onConfirmDatePicker(value)
Defined in src/app/component/date-picker/date-picker.component.ts:52
Parameters :
Name Optional
value No
Returns : void
onSelectValueChange
onSelectValueChange(value)
Defined in src/app/component/date-picker/date-picker.component.ts:56
Parameters :
Name Optional
value No
Returns : void

Properties

_mode
Type : "portrait" | "landscape"
Default value : 'portrait'
Defined in src/app/component/date-picker/date-picker.component.ts:21
landscape
Type : boolean
Default value : false
Defined in src/app/component/date-picker/date-picker.component.ts:22

Accessors

mode
getmode()
Defined in src/app/component/date-picker/date-picker.component.ts:38
setmode(value)
Defined in src/app/component/date-picker/date-picker.component.ts:27
Parameters :
Name Optional
value No
Returns : void 
import {
  Component,
  Input,
  Output,
  EventEmitter,
  ViewEncapsulation
} from '@angular/core';

@Component({
  selector: 'stbui-date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class DatePickerComponent {
  _mode: 'portrait' | 'landscape' = 'portrait';
  landscape: boolean = false;

  @Input() action: boolean = false;

  @Input()
  set mode(value) {
    value = value == 'portrait' ? 'portrait' : 'landscape';
    if (value != this._mode) {
      this._mode = value;
    }

    if (value == 'landscape') {
      this.landscape = true;
    }
  }

  get mode() {
    return this._mode;
  }

  @Output() onCanel = new EventEmitter<any>();
  @Output() onConfirm = new EventEmitter<any>();
  @Output() selectValueChange = new EventEmitter();

  constructor() {}

  onCancelDatePicker(value) {
    this.onCanel.emit(value);
  }

  onConfirmDatePicker(value) {
    this.onConfirm.emit(value);
  }

  onSelectValueChange(value) {
    this.selectValueChange.emit(value);
  }
}
Copy
<div class="stb-date-picker mat-elevation-z4" [class.landspace]="landscape">
  <stbui-calendar [mode]="mode" [action]="action"
    (onCancelDatePicker)="onCancelDatePicker($event)"
    (onConfirmDatePicker)="onConfirmDatePicker($event)"
    (selectValueChange)="onSelectValueChange($event)"
  ></stbui-calendar>
</div>
Copy

./date-picker.component.scss 

.stb-date-picker {
  display: inline-block;
  position: relative;
  width: 310px;

  &.fullWidth {
    width: 100%
  }

  &.landspace {
    width: 479px;
  }
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""