nts-ng2-components
Version:
Paquete de componentes para Angular2 desarrollado por NITSNETS.
75 lines (64 loc) • 2.38 kB
HTML
<div
(mousedown)="onMouseDown()"
(mouseup)="onMouseUp()"
(clickOutside)="closeCombo()"
>
<div class="daterange-input-container"
*ngIf="combo"
[class.filled]="ntsModel?.to && ntsModel?.from"
[class.with-arrows]="showArrows"
>
<nts-input
icon="calendar"
[ntsModel]="comboModel"
[placeholder]="comboLabel"
(ntsFocus)="openCombo()"
>
</nts-input>
<nts-button class="arrow-btn left" *ngIf="showArrows" icon="arrow-left" (click)="prevRange()"></nts-button>
<nts-button class="arrow-btn right" *ngIf="showArrows" icon="arrow-right" (click)="nextRange()"></nts-button>
</div>
<div class="main-container"
*ngIf="!combo || comboOpened"
[class.floating]="combo"
[class.align-left]="side === 'left'"
[class.align-right]="side === 'right'"
>
<div class="pickers-container">
<nts-date-picker
class="picker spacing"
(ntsModelChange)="onFromChanges($event)"
[ntsModel]="ntsModel?.from"
[label]="fromLabel || (toLabel ? ' ' : '')"
[inline]="combo"
[maxDate]="ntsModel?.to || maxDate"
[minDate]="minDate"
[rangeTo]="ntsModel?.to"
> </nts-date-picker>
<nts-date-picker
class="picker"
(ntsModelChange)="onToChanges($event)"
[ntsModel]="ntsModel?.to"
[label]="toLabel || (fromLabel ? ' ' : '')"
[inline]="combo"
[maxDate]="maxDate"
[minDate]="ntsModel?.from || minDate"
[rangeFrom]="ntsModel?.from"
> </nts-date-picker>
</div>
<div class="buttons-container" *ngIf="combo && comboOpened">
<nts-row>
<nts-button label="Today" (click)="loadPreset('today')"></nts-button>
<nts-button label="This week" (click)="loadPreset('week')"></nts-button>
<nts-button label="This month" (click)="loadPreset('month')"></nts-button>
<nts-button label="This year" (click)="loadPreset('year')"></nts-button>
</nts-row>
<nts-row>
<nts-button label="Yesterday" (click)="loadPreset('yesterday')"></nts-button>
<nts-button label="Last week" (click)="loadPreset('l_week')"></nts-button>
<nts-button label="Last month" (click)="loadPreset('l_month')"></nts-button>
<nts-button label="Last year" (click)="loadPreset('l_year')"></nts-button>
</nts-row>
</div>
</div>
</div>