datepicker always show Day-1

Question

I use angular 5 Reactive Form and ngx-bootstrap datepicker for date input.

<div class="col-sm-3 form-group">
            <input type="text" class="form-control" 
            placeholder="End Date" 
            formControlName="endDate" 
            [bsConfig]="{ containerClass: 'theme-dark-blue', dateInputFormat: 'YYYY-MM-DD' }"
            bsDatepicker> 
        </div>
ngOnInit(){
  this.createEditForm();
}

createEditForm(){
this.editForm = this.fb.group(
    {
        id: [this.id],
        startDate: [this.startDate, Validators.required],
        endDate: [this.endDate],
        annualSalary: [this.annualSalary, Validators.required],
        userId: [this.userId]
    });

}

but when I change input a date, the front end display correct one (like when I type 2018-01-03 it display 2018-01-03) but the form value display like Day-1 (2018-01-02)

I have tried to set the date to string but still doesn't work.

Also is there a way to convert every date to string just taking YYYY-MM-DD only without the time and zone ?

I use ngx-boostrap 2.0.5 (trying 3.0.1 it produce errors)

Answer 1

I used this function onHidden it's work for me,
hope it helps you (;

CutTimeZoneDate(){
        let d:Date = this.form.get(your-nameform-control).value
        d.setHours(d.getHours() - d.getTimezoneOffset() / 60);
        this.form.get(your-nameform-control).setValue(d)