fix(datepicker): date parsing when using a custom date format (#3522)

valor-software · Jan 24, 2018 · 5c2aa9e · 5c2aa9e
1 parent 8fe43e2
commit 5c2aa9e
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 4 deletions.
diff --git a/demo/src/app/components/+datepicker/datepicker-section.list.ts b/demo/src/app/components/+datepicker/datepicker-section.list.ts
@@ -16,6 +16,7 @@ import {
   NgApiDocComponent,
   NgApiDocConfigComponent
 } from '../../docs/api-docs';
+import { DemoDatePickerCustomFormatComponent } from './demos/custom-format/date-picker-custom-format';
 
 export const demoComponentContent: ContentSection[] = [
   {
@@ -51,6 +52,17 @@ export const demoComponentContent: ContentSection[] = [
         `,
         outlet: DemoDatePickerPopupComponent
       },
+      {
+        title: 'Custom date format',
+        anchor: 'format',
+        component: require('!!raw-loader?lang=typescript!./demos/custom-format/date-picker-custom-format.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/custom-format/date-picker-custom-format.html'),
+        description: `
+          <p>You can easily change the date format by specifying the <code>dateInputFormat</code> in <code>[bsConfig]</code></p>
+          <p>The following example shows how to use a datepicker having <code>YYYY-MM-DD</code> date format inside a form:</p>
+        `,
+        outlet: DemoDatePickerCustomFormatComponent
+      },
       {
         title: 'Themes',
         anchor: 'themes',

diff --git a/demo/src/app/components/+datepicker/demos/custom-format/date-picker-custom-format.html b/demo/src/app/components/+datepicker/demos/custom-format/date-picker-custom-format.html
@@ -0,0 +1,19 @@
+<div class="row">
+  <div class="col-xs-12 col-12 col-md-4 form-group">
+    <form [formGroup]="myForm">
+      <input
+        class="form-control"
+        [minDate]="minDate"
+        [maxDate]="maxDate"
+        #dp="bsDatepicker"
+        bsDatepicker
+        formControlName="myDate"
+        [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }"
+      >
+    </form>
+  </div>
+  <div class="col-xs-12 col-12 col-md-3 form-group">
+    <button class="btn btn-success" (click)="dp.toggle()">Date Picker</button>
+  </div>
+</div>
+<br>
diff --git a/demo/src/app/components/+datepicker/demos/custom-format/date-picker-custom-format.ts b/demo/src/app/components/+datepicker/demos/custom-format/date-picker-custom-format.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'demo-date-picker-custom-format',
+  templateUrl: './date-picker-custom-format.html'
+})
+export class DemoDatePickerCustomFormatComponent {
+  minDate = new Date(2017, 5, 10);
+  maxDate = new Date(2018, 9, 15);
+
+  myForm = new FormGroup({
+    myDate: new FormControl(new Date())
+  });
+}
diff --git a/demo/src/app/components/+datepicker/demos/index.ts b/demo/src/app/components/+datepicker/demos/index.ts
@@ -6,10 +6,12 @@ import { DemoDatepickerMinMaxComponent } from './min-max/min-max.component';
 import { DemoDatepickerDisabledComponent } from './disabled/disabled.component';
 import { DemoDatepickerFormsComponent } from './forms/forms.component';
 import { DemoDatepickerReactiveFormsComponent } from './reactive-forms/reactive-forms.component';
+import { DemoDatePickerCustomFormatComponent } from './custom-format/date-picker-custom-format';
 
 export const DEMO_COMPONENTS = [
   DatepickerDemoComponent,
   DemoDatePickerPopupComponent,
+  DemoDatePickerCustomFormatComponent,
   DemoDatepickerColorThemingComponent,
   DemoDatepickerChangeLocaleComponent,
   DemoDatepickerMinMaxComponent,

diff --git a/src/datepicker/bs-datepicker-input.directive.ts b/src/datepicker/bs-datepicker-input.directive.ts
@@ -42,7 +42,6 @@ export class BsDatepickerInputDirective
   private _value: Date;
 
   constructor(@Host() private _picker: BsDatepickerDirective,
-              private _config: BsDatepickerConfig,
               private _localeService: BsLocaleService,
               private _renderer: Renderer2,
               private _elRef: ElementRef,
@@ -115,7 +114,7 @@ export class BsDatepickerInputDirective
           `Locale "${_localeKey}" is not defined, please add it with "defineLocale(...)"`
         );
       }
-      this._value = parseDate(value, this._config.dateInputFormat, this._localeService.currentLocale);
+      this._value = parseDate(value, this._picker._config.dateInputFormat, this._localeService.currentLocale);
     }
 
     this._picker.bsValue = this._value;

diff --git a/src/datepicker/bs-daterangepicker-input.directive.ts b/src/datepicker/bs-daterangepicker-input.directive.ts
@@ -44,7 +44,6 @@ export class BsDaterangepickerInputDirective
   private _value: Date[];
 
   constructor(@Host() private _picker: BsDaterangepickerDirective,
-              private _config: BsDatepickerConfig,
               private _localeService: BsLocaleService,
               private _renderer: Renderer2,
               private _elRef: ElementRef,
@@ -142,7 +141,7 @@ export class BsDaterangepickerInputDirective
 
       this._value = (_input as string[])
         .map((_val: string): Date =>
-          parseDate(_val, this._config.dateInputFormat, this._localeService.currentLocale))
+          parseDate(_val, this._picker._config.dateInputFormat, this._localeService.currentLocale))
         .map((date: Date) => (isNaN(date.valueOf()) ? null : date));
     }