Angular material datepicker get value as string

Question

I have an Angular Material datepicker. I have formatted the date as I wish but now I can't figure out how to send the string which is in the form to the backend.

My html:

<mat-form-field>
    <input matInput [formControl]="date" [matDatepicker]="dp" placeholder="Fill in a date">
    <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
    <mat-datepicker #dp></mat-datepicker>
</mat-form-field>

My ts:

export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'YYYY-MM-DD',
    monthYearLabel: 'YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'YYYY',
  },
};


@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss'],
  providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS, },
  ],
})

export class SearchComponent implements OnInit {

  flightIDInput = new FormControl('WZZ1BW')
  date = new FormControl("");


  constructor(private dataMessageService: DataMessagesService) { }

  ngOnInit() {
  }

  getMessages() {
    console.log(this.date.value);
    });
  }
}

The value in my form is written as 2019-10-18, but when i call it with this.date or this.date.value it returns this massive object. How can I send the string "2019-10-18" to my backend?

The object has year, month and day attributes. You can extract them with getDay() and so on. — jasie
– jasie, Commented Oct 18, 2019 at 11:37
Try this.date.getDate(), this.date.getYear(), this.date.getMonth() - does that work? — jasie
– jasie, Commented Oct 18, 2019 at 12:06

D3v30 · Accepted Answer · 2019-12-16 14:45:43Z

1

You can format your date value by passing it into the below function in TS...

formatDate(date) {
  var d = new Date(date),
  month = '' + (d.getMonth() + 1),
  day = '' + d.getDate(),
  year = d.getFullYear();

if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;

return [year, month, day].join('-');}

edited Dec 16, 2019 at 14:45

answered Oct 18, 2019 at 12:49

D3v30

1821 gold badge3 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular material datepicker get value as string

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related