D-Net

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

import {Observable}       from 'rxjs/Observable';

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

import {IMyOptions, IMyDateModel} from 'mydatepicker';

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

@Component({

    selector: 'date-filter',

    template: `

    <select *ngIf="dateValue.type!='range' "  name="{{'select_date_type'+filterId}}"    [(ngModel)]=dateValue.type >

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

    </select>

    <div *ngIf="dateValue.type=='range' " class="uk-form-row dateFilter" >

      <table >

      <tr><td>

      <select name="{{'select_date_type'+filterId}}"    [(ngModel)]=dateValue.type >

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

      </select></td>

      <td>

          From</td><td  style="width: 112px;"><my-date-picker name="from" [options]="myDatePickerOptions"

                    [(ngModel)]="from" (dateChanged)="onFromDateChanged($event)" ></my-date-picker>

      </td> <td>

            To </td><td  style="width: 112px;">     <my-date-picker name="to" [options]="myDatePickerOptions"

                            [(ngModel)]="to" (dateChanged)="onToDateChanged($event)" ></my-date-picker></td></tr>

      </table>

     </div>

    `

})

export class DateFilterComponent {

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

    @Input() filterId;

    private myDatePickerOptions: IMyOptions = {

          // other options...

          dateFormat: 'yyyy-mm-dd',

          selectionTxtFontSize: '15px',

          height:'28px',

          width: '100%',

          editableDateField: false,

          showClearDateBtn: false

      };

      // 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 } };

constructor() {

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

}

updateDefaultRangeDates(df:Date,dt:Date){

    this.from = { date: { year: df.getFullYear(), month: (df.getMonth()+1), day: df.getDate() } };

    this.to = { date: { year: dt.getFullYear(), month: (dt.getMonth()+1), day: dt.getDate() } };

  }

typeChanged(type:string){

  this.dateValue.setDatesByType(type);

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

}

onFromDateChanged(event: IMyDateModel) {

  this.dateValue.from = Dates.getDateFromString(event.formatted);

}

onToDateChanged(event: IMyDateModel) {

  this.dateValue.to = Dates.getDateFromString(event.formatted);

}}