import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';

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

import { NgForm, FormBuilder, FormGroup, Validators, } from '@angular/forms';

/** @title Datepicker with min & max validation */

@Component({
selector: 'datepicker-min-max-example',
templateUrl: 'datepicker-min-max-example.html',
styleUrls: ['datepicker-min-max-example.css'],
})
export class DatepickerMinMaxExample implements OnInit {
employeeForm: FormGroup;
minStartDate = new Date();
selectedStDate = '';
minDate: Date;
fruits: Array<string> = [];
flag: boolean = true;
constructor(private formbulider: FormBuilder) { }
ngOnInit() {
this.employeeForm = this.formbulider.group({
startDate: ['', [Validators.required]],
endDate: ['', [Validators.required]],
});
console.log("---------------------",
this.employeeForm.controls['startDate'].value)
this.minStartDate = new Date(this.employeeForm.controls['startDate'].value)

startValueChanged(event) {
this.selectedStDate = event.value;
this.minDate = new Date(event.value.setDate(event.value.getDate() + 1))
console.log('this.minStartDate', this.minStartDate)
// console.log(this.selectedStDate);
}

endValueChanged(event) {
// console.log('heyy')
// console.log(this.selectedStDate)
if (this.selectedStDate == '') {
alert('plz select startdate before selectingg end date')
this.employeeForm.controls['endDate'].setValue('');
}
}

onFormSubmit() {
const data = this.employeeForm.value;
if (data.startDate == '' && data.endDate == '') {
var d = new Date();
data.endDate = d;
// console.log('data.endDate===',data.endDate)
data.startDate = new Date((d.setDate(d.getDate() - 30)));
//console.log('data.startDate===',data.startDate)
console.log('hey-------------------------going to application');
}
//console.log("form data",data)
if (data.startDate != '' && data.endDate == '') {
console.log('plz select end date');
}
 if (this.flag) {
this.fruits.push('mango')
this.fruits.push('Apple')
this.fruits.push('jango')
this.fruits.push('python')
this.fruits.sort();
console.log(this.fruits.join())

}
/* for (var i = 0; i < this.fruits.length; i++) {

let list =this.fruits[i]+','

console.log(this.fruits.join());
}
*/}

/** Copyright 2019 Google Inc. All Rights Reserved.

Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license */

--------------HTML----------------------------------------

<form [formGroup]="employeeForm" (ngSubmit)="onFormSubmit()">

<mat-form-field class="example-full-width">
<input matInput [matDatepicker]="pickerstart" #start formControlName =
"startDate" placeholder="Start date" (dateChange)="startValueChanged($event)">
<mat-datepicker-toggle matSuffix [for]="pickerstart" ></mat-datepicker-toggle>
<mat-datepicker #pickerstart></mat-datepicker>
</mat-form-field>
<mat-form-field class="example-full-width">
<input matInput [min]="minDate" [matDatepicker]="pickerend" formControlName =
"endDate" placeholder="End date" (dateChange)="endValueChanged($event)">
<mat-datepicker-toggle matSuffix [for] ="pickerend"></mat-datepicker-toggle>
<mat-datepicker #pickerend></mat-datepicker>
</mat-form-field>
<button type="submit">submit</button>
</form>

<!--[min]="(employeeForm.controls.startDate.value)"-->

<!-- Copyright 2019 Google Inc. All Rights Reserved.

Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license -->