fix(datepicker): fix timezone issue (#5364)

Author: Domainv

.travis.yml

@@ -58,7 +58,6 @@ install:
 - if [[ "$NGV" == "next" ]]; then  ./scripts/ci/npm-ng-next.sh; fi
 - npm i ngx-bootstrap-ci@$TRAVIS_COMMIT
 - npm run ci:rename-pkg
-- if [[ "$NGV" == "ivy" ]]; then  scripts/ivy/compiler-cli-fix.sh; fi
 - if [[ "$TRAVIS_PULL_REQUEST" != false ]]; then export SAUCE_USERNAME=$SAUCE_USERNAME_PR; export SAUCE_ACCESS_KEY=$SAUCE_ACCESS_KEY_PR; export NPM_AUTH_TOKEN_CI=$NPM_AUTH_TOKEN_CI_PR; fi
 
 jobs:

demo/src/app/components/+datepicker/demos/custom-format/custom-format.ts

@@ -6,11 +6,15 @@ import { FormControl, FormGroup } from '@angular/forms';
   templateUrl: './custom-format.html'
 })
 export class DemoDatePickerCustomFormatComponent {
+  currentDate = new Date();
 
   form = new FormGroup({
     dateYMD: new FormControl(new Date()),
     dateFull: new FormControl(new Date()),
     dateMDY: new FormControl(new Date()),
-    dateRange: new FormControl([new Date(), new Date()])
+    dateRange: new FormControl([
+      new Date(),
+      new Date(this.currentDate.setDate(this.currentDate.getDate() + 7))
+    ])
   });
 }

package.json

@@ -24,8 +24,7 @@
     "disable-lint": "tslint \"**/*.ts\" -c tslint.json --fix --type-check -t prose -e \"node_modules/**\" -e \"dist/**\" -e \"temp/**\" -e \"scripts/docs/**\"",
     "flow.changelog": "conventional-changelog -i CHANGELOG.md -s -p angular",
     "flow.github-release": "conventional-github-releaser -p angular",
-    "build": "run-s build.modules build:schematics build.sass dist-to-modules compiler-cli:fix",
-    "compiler-cli:fix": "scripts/ivy/compiler-cli-fix.sh",
+    "build": "run-s build.modules build:schematics build.sass dist-to-modules",
     "dist-to-modules": "cp -R ./dist/. ./node_modules/ngx-bootstrap",
     "build.watch": "node scripts/build-modules --watch",
     "build:schematics": "node scripts/schematics/build",

scripts/ivy/compiler-cli-fix.sh

@@ -1,5 +1,4 @@
 import { createLocalOrUTC } from './from-anything';
-import { DateArray, DateObject } from '../types';
 import { DateInput } from '../test/chain';
 import { isDate } from '../utils/type-checks';
 
@@ -13,3 +12,19 @@ export function parseDate(input: DateInput, format?: string | string[],
 
   return config._d;
 }
+
+export function utcAsLocal(date) {
+  if (!(date instanceof Date)) {
+    return null;
+  }
+
+  return new Date(
+    date.getUTCFullYear(),
+    date.getUTCMonth(),
+    date.getUTCDate(),
+    date.getUTCHours(),
+    date.getUTCMinutes(),
+    date.getUTCSeconds(),
+    date.getUTCMilliseconds()
+  );
+}

src/chronos/create/local.ts

@@ -14,6 +14,7 @@ getMonth
 } from './utils/date-getters';
 
 export { parseDate } from './create/local';
+export { utcAsLocal } from './create/local';
 export { formatDate } from './format';
 
 

src/chronos/public_api.ts

@@ -18,13 +18,14 @@ import {
 } from '@angular/forms';
 
 import {
-  parseDate,
   formatDate,
   getLocale,
   isAfter,
   isBefore,
   isDate,
-  isDateValid
+  isDateValid,
+  parseDate,
+  utcAsLocal
 } from 'ngx-bootstrap/chronos';
 
 import { BsDatepickerDirective } from './bs-datepicker.component';
@@ -92,7 +93,7 @@ export class BsDatepickerInputDirective
 
   onChange(event: Event) {
     /* tslint:disable-next-line: no-any*/
-    this.writeValue((event.target as any).value);
+    this.writeValue((event.target as any).value, false);
     this._onChange(this._value);
     this._onTouched();
   }
@@ -125,7 +126,7 @@ export class BsDatepickerInputDirective
     this._validatorChange = fn;
   }
 
-  writeValue(value: Date | string) {
+  writeValue(value: Date | string, isUtc = true) {
     if (!value) {
       this._value = null;
     } else {
@@ -136,7 +137,12 @@ export class BsDatepickerInputDirective
           `Locale "${_localeKey}" is not defined, please add it with "defineLocale(...)"`
         );
       }
+
       this._value = parseDate(value, this._picker._config.dateInputFormat, this._localeService.currentLocale);
+
+      if (isUtc) {
+        this._value = utcAsLocal(this._value);
+      }
     }
 
     this._picker.bsValue = this._value;

src/datepicker/bs-datepicker-input.directive.ts

@@ -7,6 +7,7 @@ import {
   Provider,
   Renderer2
 } from '@angular/core';
+
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -15,7 +16,18 @@ import {
   ValidationErrors,
   Validator
 } from '@angular/forms';
-import { parseDate, formatDate, getLocale, isAfter, isBefore, isArray, isDateValid } from 'ngx-bootstrap/chronos';
+
+import {
+  parseDate,
+  formatDate,
+  getLocale,
+  isAfter,
+  isBefore,
+  isArray,
+  isDateValid,
+  utcAsLocal
+} from 'ngx-bootstrap/chronos';
+
 import { BsDaterangepickerDirective } from './bs-daterangepicker.component';
 import { BsLocaleService } from './bs-locale.service';
 
@@ -94,7 +106,7 @@ export class BsDaterangepickerInputDirective
 
   onChange(event: Event) {
     /* tslint:disable-next-line: no-any*/
-    this.writeValue((event.target as any).value);
+    this.writeValue((event.target as any).value, false);
     this._onChange(this._value);
     this._onTouched();
   }
@@ -130,7 +142,7 @@ export class BsDaterangepickerInputDirective
     this._validatorChange = fn;
   }
 
-  writeValue(value: Date[] | string) {
+  writeValue(value: Date[] | string, isUtc = true) {
     if (!value) {
       this._value = null;
     } else {
@@ -153,8 +165,16 @@ export class BsDaterangepickerInputDirective
 
 
       this._value = (_input as string[])
-        .map((_val: string): Date =>
-          parseDate(_val, this._picker._config.dateInputFormat, this._localeService.currentLocale))
+        .map((_val: string): Date => {
+            if (isUtc) {
+              return utcAsLocal(
+                parseDate(_val, this._picker._config.dateInputFormat, this._localeService.currentLocale)
+              );
+            }
+
+            return parseDate(_val, this._picker._config.dateInputFormat, this._localeService.currentLocale);
+          }
+        )
         .map((date: Date) => (isNaN(date.valueOf()) ? null : date));
     }