Skip to content

Commit

Permalink
feat(datepicker): added config param to enable optional current time …
Browse files Browse the repository at this point in the history 
…initialization (#6288)

* feat(datepicker): updated setting current time

* fix(datepicker): update function name

* fixed(datepicker): fixed optional initing current time for datepicker and daterangepicker

* feat(datepicker): removed setters for bsConfig and changed bsValue types for ranges

* fix(datepicler): updated types in utils

* chore: after merge fix

* chore: after merge fix

Co-authored-by: MuravlovaSvetlana <ushakovasvetlana94kh@gmail.com>
Co-authored-by: Dmitriy Danilov <daniloff200@gmail.com>
Co-authored-by: Dmitriy Shekhovtsov <valorkin@gmail.com>
  • Loading branch information
@SvetlanaMuravlova @MuravlovaSvetlana
@daniloff200 @valorkin
4 people authored Sep 24, 2021
1 parent 107f2b2 commit 3d2a0d5
Show file tree
Hide file tree
Showing 11 changed files with 149 additions and 98 deletions.
21 changes: 7 additions & 14 deletions apps/ngx-bootstrap-docs/src/ng-api-doc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -980,13 +980,7 @@ export const ngdoc: any = {
"description": "<p>Emits an event when the datepicker is shown</p>\n"
}
],
"properties": [
{
"name": "bsConfig",
"type": "Partial<BsDatepickerConfig>",
"description": "<p>Config object for datepicker</p>\n"
}
],
"properties": [],
"methods": [
{
"name": "show",
Expand Down Expand Up @@ -1085,6 +1079,11 @@ export const ngdoc: any = {
"type": "boolean",
"description": "<p>Show one months for special cases (only for dateRangePicker)</p>\n<ol>\n<li>maxDate is equal to today&#39;s date</li>\n<li>minDate&#39;s month is equal to maxDate&#39;s month</li>\n</ol>\n"
},
{
"name": "initCurrentTime",
"type": "boolean",
"description": "<p>Set current hours, minutes, seconds and milliseconds for bsValue</p>\n"
},
{
"name": "isAnimated",
"defaultValue": "false",
Expand Down Expand Up @@ -1394,13 +1393,7 @@ export const ngdoc: any = {
"description": "<p>Emits an event when the daterangepicker is shown</p>\n"
}
],
"properties": [
{
"name": "bsConfig",
"type": "Partial<BsDaterangepickerConfig>",
"description": "<p>Config object for daterangepicker</p>\n"
}
],
"properties": [],
"methods": [
{
"name": "show",
Expand Down
31 changes: 15 additions & 16 deletions src/datepicker/bs-datepicker-inline.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { BsDatepickerInlineConfig } from './bs-datepicker-inline.config';
import { BsDatepickerConfig } from './bs-datepicker.config';
import { DatepickerDateCustomClasses, DatepickerDateTooltipText } from './models';
import { BsDatepickerInlineContainerComponent } from './themes/bs/bs-datepicker-inline-container.component';
import { checkBsValue } from './utils/bs-calendar-utils';
import { checkBsValue, setCurrentTimeOnDateSelect } from './utils/bs-calendar-utils';

@Directive({
selector: 'bs-datepicker-inline',
Expand Down Expand Up @@ -90,18 +90,13 @@ export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges
* Initial value of datepicker
*/
@Input()
set bsValue(value: Date) {
set bsValue(value: Date | undefined) {
if (this._bsValue === value) {
return;
}

if (!this._bsValue && value) {
const now = new Date();

value.setMilliseconds(now.getMilliseconds());
value.setSeconds(now.getSeconds());
value.setMinutes(now.getMinutes());
value.setHours(now.getHours());
if (value && this.bsConfig?.initCurrentTime) {
value = setCurrentTimeOnDateSelect(value);
}

this._bsValue = value;
Expand Down Expand Up @@ -131,23 +126,27 @@ export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges
}

ngOnChanges(changes: SimpleChanges): void {
if (changes.bsConfig) {
if (changes.bsConfig.currentValue?.initCurrentTime && changes.bsConfig.currentValue?.initCurrentTime !== changes.bsConfig.previousValue?.initCurrentTime && this._bsValue) {
this._bsValue = setCurrentTimeOnDateSelect(this._bsValue);
this.bsValueChange.emit(this._bsValue);
}
}

if (!this._datepickerRef || !this._datepickerRef.instance) {
return;
}

if (changes.minDate) {
this._datepickerRef.instance.minDate = this.minDate;
this.setConfig();
}

if (changes.maxDate) {
this._datepickerRef.instance.maxDate = this.maxDate;
this.setConfig();
}

if (changes.datesDisabled) {
this._datepickerRef.instance.datesDisabled = this.datesDisabled;
this.setConfig();
}

if (changes.datesEnabled) {
Expand All @@ -157,18 +156,17 @@ export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges

if (changes.isDisabled) {
this._datepickerRef.instance.isDisabled = this.isDisabled;
this.setConfig();
}

if (changes.dateCustomClasses) {
this._datepickerRef.instance.dateCustomClasses = this.dateCustomClasses;
this.setConfig();
}

if (changes.dateTooltipTexts) {
this._datepickerRef.instance.dateTooltipTexts = this.dateTooltipTexts;
this.setConfig();
}

this.setConfig();
}

/**
Expand All @@ -187,7 +185,8 @@ export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges
dateCustomClasses: this.dateCustomClasses || this.bsConfig && this.bsConfig.dateCustomClasses,
dateTooltipTexts: this.dateTooltipTexts || this.bsConfig && this.bsConfig.dateTooltipTexts,
datesDisabled: this.datesDisabled || this.bsConfig && this.bsConfig.datesDisabled,
datesEnabled: this.datesEnabled || this.bsConfig && this.bsConfig.datesEnabled
datesEnabled: this.datesEnabled || this.bsConfig && this.bsConfig.datesEnabled,
initCurrentTime: this.bsConfig?.initCurrentTime
});


Expand Down
36 changes: 16 additions & 20 deletions src/datepicker/bs-datepicker.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { filter, takeUntil } from 'rxjs/operators';
import { BsDatepickerConfig } from './bs-datepicker.config';
import { BsDatepickerViewMode, DatepickerDateCustomClasses, DatepickerDateTooltipText } from './models';
import { BsDatepickerContainerComponent } from './themes/bs/bs-datepicker-container.component';
import { checkBsValue } from './utils/bs-calendar-utils';
import { checkBsValue, setCurrentTimeOnDateSelect } from './utils/bs-calendar-utils';

@Directive({
selector: '[bsDatepicker]',
Expand Down Expand Up @@ -140,13 +140,8 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges, Afte
return;
}

if (!this._bsValue && value) {
const now = new Date();

value.setMilliseconds(now.getMilliseconds());
value.setSeconds(now.getSeconds());
value.setMinutes(now.getMinutes());
value.setHours(now.getHours());
if (value && this.bsConfig?.initCurrentTime) {
value = setCurrentTimeOnDateSelect(value);
}

this._bsValue = value;
Expand All @@ -157,20 +152,10 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges, Afte
return this._dateInputFormat$;
}

private _bsConfig?: Partial<BsDatepickerConfig>;

get bsConfig(): Partial<BsDatepickerConfig> | undefined {
return this._bsConfig;
}

/**
* Config object for datepicker
*/
@Input() set bsConfig(bsConfig: Partial<BsDatepickerConfig>| undefined) {
this._bsConfig = bsConfig;
this.setConfig();
this._dateInputFormat$.next(bsConfig && bsConfig.dateInputFormat);
}
@Input() bsConfig?: Partial<BsDatepickerConfig>;

ngOnInit(): void {
this._datepicker.listen({
Expand All @@ -183,6 +168,16 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges, Afte
}

ngOnChanges(changes: SimpleChanges): void {
if (changes.bsConfig) {
if (changes.bsConfig.currentValue?.initCurrentTime && changes.bsConfig.currentValue?.initCurrentTime !== changes.bsConfig.previousValue?.initCurrentTime && this._bsValue) {
this._bsValue = setCurrentTimeOnDateSelect(this._bsValue);
this.bsValueChange.emit(this._bsValue);
}

this.setConfig();
this._dateInputFormat$.next(this.bsConfig && this.bsConfig.dateInputFormat);
}

if (!this._datepickerRef || !this._datepickerRef.instance) {
return;
}
Expand Down Expand Up @@ -312,7 +307,8 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges, Afte
dateTooltipTexts: this.dateTooltipTexts || this.bsConfig && this.bsConfig.dateTooltipTexts,
datesDisabled: this.datesDisabled || this.bsConfig && this.bsConfig.datesDisabled,
datesEnabled: this.datesEnabled || this.bsConfig && this.bsConfig.datesEnabled,
minMode: this.minMode || this.bsConfig && this.bsConfig.minMode
minMode: this.minMode || this.bsConfig && this.bsConfig.minMode,
initCurrentTime: this.bsConfig?.initCurrentTime
});
}

Expand Down
4 changes: 4 additions & 0 deletions src/datepicker/bs-datepicker.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,4 +174,8 @@ export class BsDatepickerConfig implements DatepickerRenderOptions {
* Label for 'custom range' button
*/
customRangeButtonLabel = 'Custom Range';
/**
* Set current hours, minutes, seconds and milliseconds for bsValue
*/
initCurrentTime?: boolean;
}
82 changes: 48 additions & 34 deletions src/datepicker/bs-daterangepicker-inline.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,31 @@ import { BsDatepickerConfig } from './bs-datepicker.config';
import { BsDaterangepickerInlineConfig } from './bs-daterangepicker-inline.config';
import { BsDaterangepickerInlineContainerComponent } from './themes/bs/bs-daterangepicker-inline-container.component';
import { DatepickerDateCustomClasses } from './models';
import { checkBsValue, checkRangesWithMaxDate } from './utils/bs-calendar-utils';
import {
checkBsValue,
checkRangesWithMaxDate,
setDateRangesCurrentTimeOnDateSelect
} from './utils/bs-calendar-utils';

@Directive({
selector: 'bs-daterangepicker-inline',
exportAs: 'bsDaterangepickerInline'
})
export class BsDaterangepickerInlineDirective implements OnInit, OnDestroy, OnChanges {
_bsValue?: Date[];
_bsValue?: (Date|undefined)[] | undefined;
/**
* Initial value of datepicker
*/
@Input()
set bsValue(value: Date[]) {
set bsValue(value: (Date|undefined)[] | undefined) {
if (this._bsValue === value) {
return;
}

if (value && this.bsConfig?.initCurrentTime) {
value = setDateRangesCurrentTimeOnDateSelect(value);
}

this._bsValue = value;
this.bsValueChange.emit(value);
}
Expand Down Expand Up @@ -67,7 +76,7 @@ export class BsDaterangepickerInlineDirective implements OnInit, OnDestroy, OnCh
/**
* Emits when daterangepicker value has been changed
*/
@Output() bsValueChange: EventEmitter<Date[]> = new EventEmitter();
@Output() bsValueChange: EventEmitter<(Date|undefined)[] | undefined> = new EventEmitter();

protected _subs: Subscription[] = [];

Expand Down Expand Up @@ -117,43 +126,47 @@ export class BsDaterangepickerInlineDirective implements OnInit, OnDestroy, OnCh
}

ngOnChanges(changes: SimpleChanges): void {
if (!this._datepickerRef || !this._datepickerRef.instance) {
return;
if (changes.bsConfig) {
if (changes.bsConfig.currentValue.initCurrentTime && changes.bsConfig.currentValue.initCurrentTime !== changes.bsConfig.previousValue.initCurrentTime && this._bsValue) {
this._bsValue = setDateRangesCurrentTimeOnDateSelect(this._bsValue);
this.bsValueChange.emit(this._bsValue);
}
}

if (changes.minDate) {
this._datepickerRef.instance.minDate = this.minDate;
this.setConfig();
}
if (!this._datepickerRef || !this._datepickerRef.instance) {
return;
}

if (changes.maxDate) {
this._datepickerRef.instance.maxDate = this.maxDate;
this.setConfig();
}
if (changes.minDate) {
this._datepickerRef.instance.minDate = this.minDate;
}

if (changes.datesEnabled) {
this._datepickerRef.instance.datesEnabled = this.datesEnabled;
}
if (changes.maxDate) {
this._datepickerRef.instance.maxDate = this.maxDate;
}

if (changes.datesDisabled) {
this._datepickerRef.instance.datesDisabled = this.datesDisabled;
this.setConfig();
}
if (changes.datesEnabled) {
this._datepickerRef.instance.datesEnabled = this.datesEnabled;
this._datepickerRef.instance.value = this._bsValue;
}

if (changes.daysDisabled) {
this._datepickerRef.instance.daysDisabled = this.daysDisabled;
this.setConfig();
}
if (changes.datesDisabled) {
this._datepickerRef.instance.datesDisabled = this.datesDisabled;
}

if (changes.isDisabled) {
this._datepickerRef.instance.isDisabled = this.isDisabled;
this.setConfig();
}
if (changes.daysDisabled) {
this._datepickerRef.instance.daysDisabled = this.daysDisabled;
}

if (changes.dateCustomClasses) {
this._datepickerRef.instance.dateCustomClasses = this.dateCustomClasses;
this.setConfig();
}
if (changes.isDisabled) {
this._datepickerRef.instance.isDisabled = this.isDisabled;
}

if (changes.dateCustomClasses) {
this._datepickerRef.instance.dateCustomClasses = this.dateCustomClasses;
}

this.setConfig();
}

/**
Expand All @@ -174,7 +187,8 @@ export class BsDaterangepickerInlineDirective implements OnInit, OnDestroy, OnCh
datesDisabled: this.datesDisabled || this.bsConfig && this.bsConfig.datesDisabled,
datesEnabled: this.datesEnabled || this.bsConfig && this.bsConfig.datesEnabled,
ranges: checkRangesWithMaxDate(this.bsConfig && this.bsConfig.ranges, this.maxDate || this.bsConfig && this.bsConfig.maxDate),
maxDateRange: this.bsConfig && this.bsConfig.maxDateRange
maxDateRange: this.bsConfig && this.bsConfig.maxDateRange,
initCurrentTime: this.bsConfig?.initCurrentTime
});

this._datepickerRef = this._datepicker
Expand Down
Loading

0 comments on commit 3d2a0d5

Please sign in to comment.