Skip to content

Commit 699f35a

Browse files
kimamulakimamula
authored andcommitted
fix(datepicker): apply date format appropriately
1 parent fa6f174 commit 699f35a

File tree

4 files changed

+43
-5
lines changed

4 files changed

+43
-5
lines changed

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { isDate, isDateValid } from '../chronos/utils/type-checks';
1111
import { BsDatepickerDirective } from './bs-datepicker.component';
1212
import { BsDatepickerConfig } from './bs-datepicker.config';
1313
import { BsLocaleService } from './bs-locale.service';
14+
import { distinctUntilChanged } from 'rxjs/operators';
1415

1516
const BS_DATEPICKER_VALUE_ACCESSOR = {
1617
provide: NG_VALUE_ACCESSOR,
@@ -61,6 +62,11 @@ export class BsDatepickerInputDirective
6162
this._localeService.localeChange.subscribe(() => {
6263
this._setInputValue(this._value);
6364
});
65+
66+
// update input value on format change
67+
this._picker.dateInputFormat$.pipe(distinctUntilChanged()).subscribe(() => {
68+
this._setInputValue(this._value);
69+
});
6470
}
6571

6672
_setInputValue(value: Date): void {

src/datepicker/bs-datepicker.component.ts

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
import { ComponentLoader } from '../component-loader/component-loader.class';
66
import { ComponentLoaderFactory } from '../component-loader/component-loader.factory';
77
import { BsDatepickerContainerComponent } from './themes/bs/bs-datepicker-container.component';
8-
import { Subscription } from 'rxjs';
8+
import { Observable, Subject, Subscription } from 'rxjs';
99
import { BsDatepickerConfig } from './bs-datepicker.config';
1010

1111
@Directive({
@@ -73,7 +73,14 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges {
7373
/**
7474
* Config object for datepicker
7575
*/
76-
@Input() bsConfig: Partial<BsDatepickerConfig>;
76+
@Input() set bsConfig(bsConfig: Partial<BsDatepickerConfig>) {
77+
this._bsConfig = bsConfig;
78+
this.setConfig();
79+
this._dateInputFormat$.next(bsConfig && bsConfig.dateInputFormat);
80+
}
81+
get bsConfig(): Partial<BsDatepickerConfig> {
82+
return this._bsConfig;
83+
}
7784
/**
7885
* Indicates whether datepicker's content is enabled or not
7986
*/
@@ -91,10 +98,16 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges {
9198
*/
9299
@Output() bsValueChange: EventEmitter<Date> = new EventEmitter();
93100

101+
get dateInputFormat$(): Observable<string> {
102+
return this._dateInputFormat$;
103+
}
104+
94105
protected _subs: Subscription[] = [];
95106

96107
private _datepicker: ComponentLoader<BsDatepickerContainerComponent>;
97108
private _datepickerRef: ComponentRef<BsDatepickerContainerComponent>;
109+
private _bsConfig: Partial<BsDatepickerConfig>;
110+
private readonly _dateInputFormat$ = new Subject<string>();
98111

99112
constructor(public _config: BsDatepickerConfig,
100113
_elementRef: ElementRef,

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { isArray, isDateValid } from '../chronos/utils/type-checks';
1111
import { BsDatepickerConfig } from './bs-datepicker.config';
1212
import { BsDaterangepickerDirective } from './bs-daterangepicker.component';
1313
import { BsLocaleService } from './bs-locale.service';
14+
import { distinctUntilChanged } from 'rxjs/operators';
1415

1516
const BS_DATERANGEPICKER_VALUE_ACCESSOR = {
1617
provide: NG_VALUE_ACCESSOR,
@@ -63,6 +64,11 @@ export class BsDaterangepickerInputDirective
6364
this._localeService.localeChange.subscribe(() => {
6465
this._setInputValue(this._value);
6566
});
67+
68+
// update input value on format change
69+
this._picker.rangeInputFormat$.pipe(distinctUntilChanged()).subscribe(() => {
70+
this._setInputValue(this._value);
71+
});
6672
}
6773

6874
_setInputValue(date: Date[]): void {
@@ -141,7 +147,7 @@ export class BsDaterangepickerInputDirective
141147

142148
this._value = (_input as string[])
143149
.map((_val: string): Date =>
144-
parseDate(_val, this._picker._config.dateInputFormat, this._localeService.currentLocale))
150+
parseDate(_val, this._picker._config.rangeInputFormat, this._localeService.currentLocale))
145151
.map((date: Date) => (isNaN(date.valueOf()) ? null : date));
146152
}
147153

src/datepicker/bs-daterangepicker.component.ts

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
} from '@angular/core';
1515
import { BsDaterangepickerConfig } from './bs-daterangepicker.config';
1616
import { BsDaterangepickerContainerComponent } from './themes/bs/bs-daterangepicker-container.component';
17-
import { Subscription } from 'rxjs';
17+
import { Observable, Subject, Subscription } from 'rxjs';
1818
import { ComponentLoaderFactory } from '../component-loader/component-loader.factory';
1919
import { ComponentLoader } from '../component-loader/component-loader.class';
2020
import { BsDatepickerConfig } from './bs-datepicker.config';
@@ -86,7 +86,14 @@ export class BsDaterangepickerDirective
8686
/**
8787
* Config object for daterangepicker
8888
*/
89-
@Input() bsConfig: Partial<BsDaterangepickerConfig>;
89+
@Input() set bsConfig(bsConfig: Partial<BsDaterangepickerConfig>) {
90+
this._bsConfig = bsConfig;
91+
this.setConfig();
92+
this._rangeInputFormat$.next(bsConfig && bsConfig.rangeInputFormat);
93+
}
94+
get bsConfig(): Partial<BsDaterangepickerConfig> {
95+
return this._bsConfig;
96+
}
9097
/**
9198
* Indicates whether daterangepicker's content is enabled or not
9299
*/
@@ -104,10 +111,16 @@ export class BsDaterangepickerDirective
104111
*/
105112
@Output() bsValueChange: EventEmitter<Date[]> = new EventEmitter();
106113

114+
get rangeInputFormat$(): Observable<string> {
115+
return this._rangeInputFormat$;
116+
}
117+
107118
protected _subs: Subscription[] = [];
108119

109120
private _datepicker: ComponentLoader<BsDaterangepickerContainerComponent>;
110121
private _datepickerRef: ComponentRef<BsDaterangepickerContainerComponent>;
122+
private _bsConfig: Partial<BsDaterangepickerConfig>;
123+
private readonly _rangeInputFormat$ = new Subject<string>();
111124

112125
constructor(public _config: BsDaterangepickerConfig,
113126
_elementRef: ElementRef,

0 commit comments

Comments
 (0)