nts-ng2-components/src/components/forms/daterange-picker/daterange-picker.component.html

Paquete de componentes para Angular2 desarrollado por NITSNETS.

<div
  (mousedown)="onMouseDown()"
  (mouseup)="onMouseUp()"
  (clickOutside)="closeCombo()"
>
  <div class="daterange-input-container"
    *ngIf="combo"
    [class.filled]="toModel && fromModel"
    [class.with-arrows]="showArrows"
  >
    <nts-input
      icon="calendar"
      [floating]="true"
      [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]="fromModel"
        [label]="fromLabel || (toLabel ? ' ' : '')"
        [inline]="combo"
        [maxDate]="toModel || maxDate"
        [minDate]="minDate"
        [rangeTo]="toModel"
      > </nts-date-picker>
      <nts-date-picker
        class="picker"
        (ntsModelChange)="onToChanges($event)"
        [ntsModel]="toModel"
        [label]="toLabel || (fromLabel ? ' ' : '')"
        [inline]="combo"
        [maxDate]="maxDate"
        [minDate]="fromModel || minDate"
        [rangeFrom]="fromModel"
    > </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>