D-Net

import {Component, Input, Output, EventEmitter} from '@angular/core';

import {Observable}       from 'rxjs';

import { Filter, Value, DateValue} from './searchHelperClasses.class';

import {IMyOptions, IMyDateModel} from '../../utils/my-date-picker/interfaces/index';

import {Dates} from '../../utils/string-utils.class';

import {FormControl} from "@angular/forms";

import {MatDatepickerInputEvent} from "@angular/material";

@Component({

    selector: 'date-filter',

    template: `

<div  class="uk-input ">

    <mat-select *ngIf="dateValue && dateValue.type!='range' "  name="{{'select_date_type'+filterId}}" class=" matSelection uk-input"    [(ngModel)]=dateValue.type  [disableOptionCentering]="true" panelClass="matSelectionPanel">

      <mat-option *ngFor="let type of dateValue.types let i = index"  [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</mat-option>

    </mat-select>

    <div *ngIf="dateValue && dateValue.type=='range' ">

      <div class=" uk-grid uk-" >

          <div class="uk-padding-remove uk-margin-small-left uk-width-small">

            <mat-select name="{{'select_date_type'+filterId}}"    [(ngModel)]=dateValue.type [disableOptionCentering]="true" class="matSelection uk-input" panelClass="matSelectionPanel">

              <mat-option *ngFor="let type of dateValue.types let i = index"  [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</mat-option>

            </mat-select>

          </div>

          <div class="uk-padding-remove uk-margin-small-left" style="">

            <mat-form-field class="uk-width-small">

              <input matInput [matDatepicker]="pickerFrom" placeholder="Choose from date" 

                     [formControl]="fromDate" (click)="pickerFrom.open()" (dateChange)="fromDateChanged($event)">

              <mat-datepicker-toggle matSuffix [for]="pickerFrom"></mat-datepicker-toggle>

              <mat-datepicker #pickerFrom></mat-datepicker>

            </mat-form-field>

          </div>

          <div class="uk-padding-remove uk-margin-small-left" style="">

            <mat-form-field class="uk-width-small">

              <input matInput [matDatepicker]="pickerTo" placeholder="Choose to date" 

                     [formControl]="toDate" (click)="pickerTo.open()" (dateChange)="toDateChanged($event)">

              <mat-datepicker-toggle matSuffix [for]="pickerTo"></mat-datepicker-toggle>

              <mat-datepicker #pickerTo></mat-datepicker>

            </mat-form-field>

          </div>

      </div>

    </div>

</div>

    `

})

export class DateFilterComponent {

    @Input() dateValue = new DateValue("any");

    @Input() filterId;

    @Input() validDateFrom: boolean = true;

    @Input() validDateTo: boolean = true;

      // Initialized to specific date (09.10.2018).

      public from;//: Object = { date: { year: 2018, month: 10, day: 9 } };

      public to;//: Object = { date: { year: 2018, month: 10, day: 9 } };

      public fromDate;

      public toDate;

constructor() {

}

ngOnInit() {

  this.updateDefaultRangeDates(this.dateValue.from,this.dateValue.to);

}

updateDefaultRangeDates(df:Date,dt:Date){

    this.fromDate = new FormControl(df);

    this.toDate = new FormControl(dt);

  }

typeChanged(type:string){

  this.dateValue.setDatesByType(type);

  this.updateDefaultRangeDates(this.dateValue.from, this.dateValue.to);

}

fromDateChanged(event: MatDatepickerInputEvent<Date>) {

  this.dateValue.from = event.value;

  //console.info("FROM: "+Dates.getDateToString(this.dateValue.from));

}

toDateChanged(event: MatDatepickerInputEvent<Date>) {

  this.dateValue.to = event.value;

  //console.info("TO: "+Dates.getDateToString(this.dateValue.to));

}

}