File
Metadata
| encapsulation |
ViewEncapsulation.None |
| selector |
stbui-calendar |
| styleUrls |
./calendar.component.scss |
| templateUrl |
./calendar.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Accessors
|
|
|
|
action
|
Type : boolean
|
Default value : false
|
|
|
Methods
|
changeDislayDate
|
changeDislayDate(date)
|
|
|
|
|
|
isModeLandscape
|
isModeLandscape()
|
|
|
|
|
|
onCancelDatePickerTriggered
|
onCancelDatePickerTriggered()
|
|
|
|
|
|
onConfirmDatePickerTriggered
|
onConfirmDatePickerTriggered()
|
|
|
|
|
|
onMonthChange
|
onMonthChange(val)
|
|
|
|
|
|
onSelectValueChange
|
onSelectValueChange(event)
|
|
|
|
|
|
toggleCurrentlySelected
|
toggleCurrentlySelected(day)
|
|
|
|
|
|
_currentlySelected
|
Type : []
|
Default value : []
|
|
|
|
displayMonthDay
|
Default value : true
|
|
|
|
selectedDate
|
Default value : new Date()
|
|
|
|
slideType
|
Type : string
|
Default value : 'next'
|
|
|
Accessors
|
mode
|
getmode()
|
|
|
setmode(value)
|
|
|
|
|
import {
Component,
Input,
Output,
EventEmitter,
ViewEncapsulation
} from '@angular/core';
import * as dateUtils from '../dateUtils';
@Component({
selector: 'stbui-calendar',
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class CalendarComponent {
_currentlySelected = [];
weekTexts;
displayDates;
selectedDate = new Date();
slideType = 'next';
displayMonthDay = true;
@Input() action: boolean = false;
private _mode;
@Input()
set mode(value) {
this._mode = value == 'portrait' ? false : true;
}
get mode() {
return this._mode;
}
@Output() onCancelDatePicker = new EventEmitter<any>();
@Output() onConfirmDatePicker = new EventEmitter<any>();
@Output() selectValueChange = new EventEmitter();
constructor() {
const displayDate = dateUtils.cloneDate(new Date());
this.displayDates = [displayDate];
}
isModeLandscape() {
if (this.mode == 'landscape') {
return this.mode;
} else {
return this.mode;
}
}
toggleCurrentlySelected(day) {}
onMonthChange(val) {
const displayDate = dateUtils.addMonths(this.displayDates[0], val);
this.changeDislayDate(displayDate);
}
changeDislayDate(date) {
const oldDate = this.displayDates[0];
if (
date.getFullYear() === oldDate.getFullYear() &&
date.getMonth() === oldDate.getMonth()
) {
return;
}
const displayDate = dateUtils.cloneDate(date);
displayDate.setDate(1);
this.displayDates.push(displayDate);
this.displayDates.splice(0, 1);
}
onSelectValueChange(event) {
this.selectedDate = event;
this.changeDislayDate(event);
this.selectValueChange.emit(event);
}
onCancelDatePickerTriggered() {
this.onCancelDatePicker.emit('cancel');
}
onConfirmDatePickerTriggered() {
this.onConfirmDatePicker.emit(this.selectedDate);
}
}
<div class="stb-calendar" [class.stb-calendar-landspace]="mode">
<stbui-date-display [selectedDate]="selectedDate"></stbui-date-display>
<div class="stb-calendar-container">
<div class="stb-calendar-monthday-container">
<stbui-calendar-toolbar [displayDates]="displayDates" (monthChange)="onMonthChange($event)"></stbui-calendar-toolbar>
<div class="stb-calendar-week">
<span class="stb-calendar-week-day">一</span>
<span class="stb-calendar-week-day">二</span>
<span class="stb-calendar-week-day">三</span>
<span class="stb-calendar-week-day">四</span>
<span class="stb-calendar-week-day">五</span>
<span class="stb-calendar-week-day">六</span>
<span class="stb-calendar-week-day">日</span>
</div>
<div class="stb-calendar-monthday">
<div class="stb-calendar-monthday-slide">
<stbui-calendar-month (selectValueChange)="onSelectValueChange($event)" [displayDate]="displayDate" *ngFor="let displayDate of displayDates"></stbui-calendar-month>
</div>
</div>
</div>
<div class="stb-calendar-actions" *ngIf="action">
<button mat-button color="primary" (click)="onCancelDatePickerTriggered()">取消</button>
<button mat-button color="primary" (click)="onConfirmDatePickerTriggered()">确定</button>
</div>
</div>
</div>
.stb-calendar {
color: rgba(0, 0, 0, .87);
user-select: none;
width: 310px;
&-landspace {
width: 479px;
}
&-container {
display: flex;
flex-direction: column;
background: #fff;
}
&-monthday-container {
display: flex;
align-content: space-between;
justify-content: space-between;
flex-direction: column;
font-size: 12px;
font-weight: 400;
padding: 0px 8px;
transition: all .45s cubic-bezier(.23, 1, .32, 1);
}
&-week {
display: flex;
flex-direction: row;
justify-content: space-between;
font-weight: 500;
height: 20px;
line-height: 15px;
opacity: 0.5;
text-align: center;
}
&-week-day {
width: 42px;
}
&-monthday {
position: relative;
overflow: hidden;
height: 214px;
}
&-monthday-slide {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}
&-actions {
display: flex;
flex-direction: row;
justify-content: flex-end;
margin: 0px;
max-height: 48px;
padding: 0px;
.stb-flat-button {
min-width: 64px;
margin: 4px 8px 8px 0px;
}
}
}
.stb-calendar-slide-next-enter-active,
.stb-calendar-slide-next-leave-active,
.stb-calendar-slide-prev-enter-active,
.stb-calendar-slide-prev-leave-active {
backface-visibility: hidden;
}
.stb-calendar-slide-next-enter {
transform: translate3d(100%, 0, 0);
}
.stb-calendar-slide-next-leave-active {
transform: translate3d(-100%, 0, 0);
opacity: 0;
}
.stb-calendar-slide-prev-enter {
transform: translate3d(-100%, 0, 0);
}
.stb-calendar-slide-prev-leave-active {
transform: translate3d(100%, 0, 0);
opacity: 0;
}
.stb-calendar-year-container {
display: flex;
justify-content: space-between;
flex-direction: column;
margin-top: 10px;
width: 310px;
height: 272px;
overflow: hidden;
}
.stb-calendar-year {
height: inherit;
line-height: 35px;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
.stb-calendar-year-list {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
}
Legend
Html element with directive