src/app/component/date-picker/date-picker.component.ts
| encapsulation | ViewEncapsulation.None |
| selector | stbui-date-picker |
| styleUrls | ./date-picker.component.scss |
| templateUrl | ./date-picker.component.html |
Properties |
Methods |
Inputs |
Outputs |
Accessors |
constructor()
|
| action | |
Type : boolean
|
|
Default value : false
|
|
| mode | |
| onCanel | |
Type : EventEmitter
|
|
| onConfirm | |
Type : EventEmitter
|
|
| selectValueChange | |
Type : EventEmitter
|
|
| onCancelDatePicker | ||||
onCancelDatePicker(value)
|
||||
|
Parameters :
Returns :
void
|
| onConfirmDatePicker | ||||
onConfirmDatePicker(value)
|
||||
|
Parameters :
Returns :
void
|
| onSelectValueChange | ||||
onSelectValueChange(value)
|
||||
|
Parameters :
Returns :
void
|
| _mode |
Type : "portrait" | "landscape"
|
Default value : 'portrait'
|
| landscape |
Type : boolean
|
Default value : false
|
| mode | ||||
getmode()
|
||||
setmode(value)
|
||||
|
Parameters :
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);
}
}
<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>
./date-picker.component.scss
.stb-date-picker {
display: inline-block;
position: relative;
width: 310px;
&.fullWidth {
width: 100%
}
&.landspace {
width: 479px;
}
}