bootstrap date picker setting date one day behind

Question

I use bootstrap date picker and able to save date correctly to backend using reactive form. However, fetching the same date to UI, date showed is always one day behind.

CODE:

 this.subjectPersonalform = this.formBuilder.group({dob_info: formBuilder.group({
    dob: null,
    dob_nv: ''
  }, { validator: [_fmError.bothEmptyValidator, _fmError.bothCapturedValidator, _fmError.FutureDateValidator] }),  });

Setting Data on UI:

let subject = JSON.parse(sessionStorage.getItem('SubjectPersonal')); 
this.subjectPersonalform.patchValue({ dob_info: { 
        dob:  subject['dob'] ,
        dob_nv: subject['dob_nv']
      },});

Incoming Data from backend:

HTML:

 <div class="form-group" formGroupName="dob_info">
          <span>Date of Birth</span>
          <div class="input-group">
            <input type="text" class="form-control " bsDatepicker [bsConfig]="{containerClass:'theme-default'}"
              formControlName="dob">
            <select class="form-control col-sm-4" style="padding-right: 2px;padding-right: 2px;"
              formControlName="dob_nv">
              <option value="">Select</option>
              <option *ngFor="let dobNv of dobNvs" [value]="dobNv.CODE">{{ dobNv.CODE}}</option>
            </select>
          </div>
          <small class='text-danger'
            *ngIf="subjectPersonalform.controls.dob_info.hasError('bothEmpty') && notSubmitted ">{{_fmError.getEmptyMessage()}}
          </small>
          <small class='text-danger'
            *ngIf="subjectPersonalform.controls.dob_info.hasError('bothCaptured') && notSubmitted ">{{_fmError.getBothCapturedMessage()}}
          </small>
          <small class='text-danger'
            *ngIf="subjectPersonalform.controls.dob_info.hasError('futureDate') && notSubmitted ">{{_fmError.getFutureDateMessage()}}
          </small>
        </div>

Data displayed on UI is -> 11/17/2019

Have found couple of issues reported on the same line, but solutions mentioned are not solving my issue. Any help is highly appreciated..!.. Thanks in advance.

Resolved..!..Step1 (Angular to Node) - Used toISOString() in before passing date to NODE. Step 2 (@Node)-> new Date(.dob).toJSON().slice(0, 19).replace('T', ' ') , so ensured proper utc while saving. Step 3 (while fetching data to ui, added @ NODE- my sql connection setting-> added-> timezone: 'utc'. — NewbieAngular, Jan 07 '20 at 05:05

Maihan Nijat · Answer 1 · 2020-01-06T19:49:39.800

0

It's happening because of Timezone Offset. Add the timezone difference like:

let date = new Date("2019-11-17");
date = new Date(date.getTime() + date.getTimezoneOffset() * 60000)

Or replace - in your date string with /. Create date object like new Date('2019/11/17') instead of new Date('2019-11-11)

You can also fix this by setting the time with your date:

new Date('2019-11-17 00:00:00');

JavaScript date object behavior is complicated. Read this article to understand the reason for why the date is one day off http://www.sunzala.com/why-the-javascript-date-is-one-day-off/

edited Jan 06 '20 at 19:49

answered Jan 06 '20 at 17:39

Maihan Nijat

9,054
11
62
110

Thanks for attending this issue. Unfortunately, issue still persists. have tried code**** let mydate = new Date('2019-11-18 00:00:00');// mydate = new Date(mydate.getTime() + mydate.getTimezoneOffset() * 60000) alert(mydate)***** then changed patch value to dob: mydate. My alert gives "Mon Nov 18 2019 00:00:00 GMT+0530 (India Standard Time)" and "Sun Nov 17 2019 18:30:00 GMT+0530 (India Standard Time)" without and with timezone difference. Have tried formatting to '/' also. Though the first alert gives date as 18th Nov, on the date field on UI it shows 17 Nov. – NewbieAngular Jan 06 '20 at 18:13
pls check https://ngx-bootstrap-datepicker-fqnwus.stackblitz.io – NewbieAngular Jan 06 '20 at 19:23
The only cross-browser string formats are a variant of ISO 8601 and IETF-compliant RFC 2822 timestamps (see [MDN's documentation for `Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) and [Why does Date.parse give incorrect results?](https://stackoverflow.com/q/2587345/215552)). Also, there's no such thing as a "TimezoneOffset". – Heretic Monkey Jan 06 '20 at 19:48
yes..that option works for stackblitz code , but unfortunately not in application code – NewbieAngular Jan 07 '20 at 02:26

bootstrap date picker setting date one day behind

1 Answers1