ng-bootstrap datepicker format

You're using ng-bootstrap not ng2-bootstrap (different groups). The code behind it uses the NgbDateStruct which is an object { day, month, year }

On submission you'll need to hook in and change the value to something else, like:

onSubmit(): {
    let ngbDate = this.form.controls['due_date'].value;
    let myDate = new Date(ngbDate.year, ngbDate.month-1, ngbDate.day);
    let formValues = this.form.value;
    formValues['due_date'] = myDate;
    <...>
    http.post(url, formValues);
}

https://ng-bootstrap.github.io/#/components/datepicker

NgbDateStruct Interface of the model of the NgbDatepicker and NgbInputDatepicker directives

Properties

day Type: number The day of month, starting at 1

month Type: number The month, with default calendar we use ISO 8601: 1=Jan ... 12=Dec

year Type: number The year, for example 2016


As @silentsod mentioned, you need to convert the date object that the datepicker uses from the NgbDateStruct format into a string format. ng-bootstrap provides a function to convert a date in the NgbDateStruct format to the ISO 8601 format (yyyy-mm-dd). You do not have to write your own if using that format:

import {NgbDateParserFormatter} from '@ng-bootstrap/ng-bootstrap';

...

constructor(private ngbDateParserFormatter: NgbDateParserFormatter; ... ) {
    ...
}

...

onSubmit(): {
    let ngbDate = this.form.controls['due_date'].value;
    let myDate = this.ngbDateParserFormatter.format(ngbDate); // e.g. myDate = 2017-01-01
    ...
}

See: https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/datepicker/ngb-date-parser-formatter.ts