Skip to content

Commit 07d0a5f

Browse files
klaascuvelierklaascuvelier
committed
Datepicker update
1 parent 27e4e6c commit 07d0a5f

File tree

3 files changed

+130
-145
lines changed

3 files changed

+130
-145
lines changed

‎src/datepicker-input/datepicker-input.component.ts

+69-80
Original file line numberDiff line numberDiff line change
@@ -5,101 +5,92 @@ import {
55
EventEmitter,
66
ElementRef,
77
TemplateRef,
8-
ViewChild
8+
ViewChild, HostBinding
99
} from "@angular/core";
1010
import { NG_VALUE_ACCESSOR } from "@angular/forms";
1111

1212
@Component({
1313
selector: "cds-date-picker-input, ibm-date-picker-input",
1414
template: `
15-
<div class="cds--form-item">
16-
<div class="cds--date-picker"
15+
<label
16+
*ngIf="label"
17+
[for]="id"
18+
class="cds--label"
19+
[ngClass]="{'cds--label--disabled': disabled}">
20+
<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
21+
<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
22+
</label>
23+
<div class="cds--date-picker-input__wrapper"
1724
[ngClass]="{
18-
'cds--date-picker--simple' : type === 'simple',
19-
'cds--date-picker--single' : type === 'single',
20-
'cds--date-picker--range' : type === 'range',
21-
'cds--date-picker--light' : theme === 'light',
22-
'cds--skeleton' : skeleton
25+
'cds--date-picker-input__wrapper--invalid': invalid,
26+
'cds--date-picker-input__wrapper--warn': warn
2327
}">
24-
<div class="cds--date-picker-container">
25-
<label
26-
*ngIf="label"
27-
[for]="id"
28-
class="cds--label"
29-
[ngClass]="{'cds--label--disabled': disabled}">
30-
<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
31-
<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
32-
</label>
33-
<div class="cds--date-picker-input__wrapper"
28+
<span>
29+
<input
30+
#input
31+
*ngIf="!skeleton"
32+
autocomplete="off"
33+
type="text"
34+
class="cds--date-picker__input"
3435
[ngClass]="{
35-
'cds--date-picker-input__wrapper--invalid': invalid,
36-
'cds--date-picker-input__wrapper--warn': warn
37-
}">
38-
<span>
39-
<input
40-
#input
41-
*ngIf="!skeleton"
42-
autocomplete="off"
43-
type="text"
44-
class="cds--date-picker__input"
45-
[ngClass]="{
46-
'cds--date-picker__input--sm': size === 'sm',
47-
'cds--date-picker__input--md': size === 'md',
48-
'cds--date-picker__input--lg': size === 'lg'
49-
}"
50-
[attr.data-invalid]="invalid ? true : undefined"
51-
[value]="value"
52-
[pattern]="pattern"
53-
[placeholder]="placeholder"
54-
[id]= "id"
55-
[disabled]="disabled"
56-
(change)="onChange($event)"/>
57-
<svg
58-
*ngIf="type !== 'simple' && !warn && !invalid"
59-
cdsIcon="calendar"
60-
size="16"
61-
class="cds--date-picker__icon">
62-
</svg>
63-
<svg
64-
*ngIf="invalid"
65-
class="cds--date-picker__icon cds--date-picker__icon--invalid"
66-
cdsIcon="warning--filled"
67-
size="16">
68-
</svg>
69-
<svg
70-
*ngIf="!invalid && warn"
71-
cdsIcon="warning--alt--filled"
72-
size="16"
73-
class="cds--date-picker__icon cds--date-picker__icon--warn">
74-
</svg>
75-
</span>
76-
</div>
77-
<div
78-
*ngIf="helperText && !invalid && !warn"
79-
class="cds--form__helper-text"
80-
[ngClass]="{'cds--form__helper-text--disabled': disabled}">
81-
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
82-
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
83-
</div>
84-
<div *ngIf="invalid" class="cds--form-requirement">
85-
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
86-
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
87-
</div>
88-
<div *ngIf="!invalid && warn" class="cds--form-requirement">
89-
<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
90-
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
91-
</div>
92-
</div>
36+
'cds--date-picker__input--sm': size === 'sm',
37+
'cds--date-picker__input--md': size === 'md',
38+
'cds--date-picker__input--lg': size === 'lg'
39+
}"
40+
[attr.data-invalid]="invalid ? true : undefined"
41+
[value]="value"
42+
[pattern]="pattern"
43+
[placeholder]="placeholder"
44+
[id]= "id"
45+
[disabled]="disabled"
46+
(change)="onChange($event)"
47+
/>
48+
<svg
49+
*ngIf="type !== 'simple' && !warn && !invalid"
50+
cdsIcon="calendar"
51+
size="16"
52+
class="cds--date-picker__icon">
53+
</svg>
54+
<svg
55+
*ngIf="invalid"
56+
class="cds--date-picker__icon cds--date-picker__icon--invalid"
57+
cdsIcon="warning--filled"
58+
size="16">
59+
</svg>
60+
<svg
61+
*ngIf="!invalid && warn"
62+
cdsIcon="warning--alt--filled"
63+
size="16"
64+
class="cds--date-picker__icon cds--date-picker__icon--warn">
65+
</svg>
66+
</span>
67+
</div>
68+
<div
69+
*ngIf="helperText && !invalid && !warn"
70+
class="cds--form__helper-text"
71+
[ngClass]="{'cds--form__helper-text--disabled': disabled}">
72+
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
73+
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
74+
</div>
75+
<div *ngIf="invalid" class="cds--form-requirement">
76+
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
77+
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
78+
</div>
79+
<div *ngIf="!invalid && warn" class="cds--form-requirement">
80+
<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
81+
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
9382
</div>
94-
</div>
9583
`,
9684
providers: [
9785
{
9886
provide: NG_VALUE_ACCESSOR,
9987
useExisting: DatePickerInput,
10088
multi: true
10189
}
102-
]
90+
],
91+
host: {
92+
"class": 'cds--date-picker-container'
93+
}
10394
})
10495
export class DatePickerInput {
10596
private static datePickerCount = 0;
@@ -111,8 +102,6 @@ export class DatePickerInput {
111102

112103
@Input() id = `datepicker-${DatePickerInput.datePickerCount++}`;
113104

114-
@Input() hasIcon = false;
115-
116105
@Input() label: string | TemplateRef<any>;
117106

118107
@Input() placeholder = "mm/dd/yyyy";

‎src/datepicker/datepicker.component.ts

+52-59
Original file line numberDiff line numberDiff line change
@@ -58,54 +58,50 @@ if (languages.default?.default["en"]?.weekdays) {
5858
<div
5959
class="cds--date-picker"
6060
[ngClass]="{
61-
'cds--date-picker--range' : range,
62-
'cds--date-picker--single' : !range,
61+
'cds--date-picker--simple' : datePickerType === 'simple',
62+
'cds--date-picker--range' : datePickerType === 'range',
63+
'cds--date-picker--single' : datePickerType === 'single',
6364
'cds--date-picker--light' : theme === 'light',
6465
'cds--skeleton' : skeleton
6566
}">
66-
<div class="cds--date-picker-container">
67-
<cds-date-picker-input
68-
#input
69-
[label]="label"
70-
[placeholder]="placeholder"
71-
[pattern]="inputPattern"
72-
[id]="id + '-input'"
73-
[size]="size"
74-
[type]="(range ? 'range' : 'single')"
75-
[hasIcon]="(range ? false : true)"
76-
[disabled]="disabled"
77-
[invalid]="invalid"
78-
[invalidText]="invalidText"
79-
[warn]="warn"
80-
[warnText]="warnText"
81-
[skeleton]="skeleton"
82-
[helperText]="helperText"
83-
(valueChange)="onValueChange($event)"
84-
(click)="openCalendar(input)">
85-
</cds-date-picker-input>
86-
</div>
87-
88-
<div *ngIf="range" class="cds--date-picker-container">
89-
<cds-date-picker-input
90-
#rangeInput
91-
[label]="rangeLabel"
92-
[placeholder]="placeholder"
93-
[pattern]="inputPattern"
94-
[id]="id + '-rangeInput'"
95-
[size]="size"
96-
[type]="(range ? 'range' : 'single')"
97-
[hasIcon]="(range ? true : null)"
98-
[disabled]="disabled"
99-
[invalid]="rangeInvalid"
100-
[invalidText]="rangeInvalidText"
101-
[warn]="rangeWarn"
102-
[warnText]="rangeWarnText"
103-
[skeleton]="skeleton"
104-
[helperText]="rangeHelperText"
105-
(valueChange)="onRangeValueChange($event)"
106-
(click)="openCalendar(rangeInput)">
107-
</cds-date-picker-input>
108-
</div>
67+
<cds-date-picker-input
68+
#input
69+
[label]="label"
70+
[placeholder]="placeholder"
71+
[pattern]="inputPattern"
72+
[id]="id + '-input'"
73+
[size]="size"
74+
[type]="datePickerType"
75+
[disabled]="disabled"
76+
[invalid]="invalid"
77+
[invalidText]="invalidText"
78+
[warn]="warn"
79+
[warnText]="warnText"
80+
[skeleton]="skeleton"
81+
[helperText]="helperText"
82+
(valueChange)="onValueChange($event)"
83+
(click)="openCalendar(input)">
84+
</cds-date-picker-input>
85+
86+
<cds-date-picker-input
87+
*ngIf="datePickerType === 'range'"
88+
#rangeInput
89+
[label]="rangeLabel"
90+
[placeholder]="placeholder"
91+
[pattern]="inputPattern"
92+
[id]="id + '-rangeInput'"
93+
[size]="size"
94+
type="range"
95+
[disabled]="disabled"
96+
[invalid]="rangeInvalid"
97+
[invalidText]="rangeInvalidText"
98+
[warn]="rangeWarn"
99+
[warnText]="rangeWarnText"
100+
[skeleton]="skeleton"
101+
[helperText]="rangeHelperText"
102+
(valueChange)="onRangeValueChange($event)"
103+
(click)="openCalendar(rangeInput)">
104+
</cds-date-picker-input>
109105
</div>
110106
</div>
111107
`,
@@ -126,10 +122,7 @@ export class DatePicker implements
126122
AfterViewInit {
127123
private static datePickerCount = 0;
128124

129-
/**
130-
* Select calendar range mode
131-
*/
132-
@Input() range = false;
125+
@Input() datePickerType: "simple" | "single" | "range" = "simple";
133126

134127
/**
135128
* Format of date
@@ -228,11 +221,11 @@ export class DatePicker implements
228221
}
229222
get flatpickrOptions(): Partial<Options> {
230223
const plugins = [...this.plugins, carbonFlatpickrMonthSelectPlugin];
231-
if (this.range) {
224+
if (this.datePickerType === "range") {
232225
plugins.push(rangePlugin({ input: `#${this.id}-rangeInput`, position: "left" }));
233226
}
234227
return Object.assign({}, this._flatpickrOptions, this.flatpickrBaseOptions, {
235-
mode: this.range ? "range" : "single",
228+
mode: this.datePickerType === "range" ? "range" : "single",
236229
plugins,
237230
dateFormat: this.dateFormat,
238231
locale: languages.default?.default[this.language] || languages.default[this.language]
@@ -268,7 +261,7 @@ export class DatePicker implements
268261
onClose: (date) => {
269262
// This makes sure that the `flatpickrInstance selectedDates` are in sync with the values of
270263
// the inputs when the calendar closes.
271-
if (this.range && this.flatpickrInstance) {
264+
if (this.datePickerType === "range" && this.flatpickrInstance) {
272265
const inputValue = this.input.input.nativeElement.value;
273266
const rangeInputValue = this.rangeInput.input.nativeElement.value;
274267
if (inputValue || rangeInputValue) {
@@ -332,7 +325,7 @@ export class DatePicker implements
332325
// and because we rely on a library that operates outside the Angular view of the world
333326
// we need to keep trying to load the library, until the relevant DOM is actually live
334327
ngAfterViewChecked() {
335-
if (!this.isFlatpickrLoaded()) {
328+
if (this.datePickerType !== "simple" && !this.isFlatpickrLoaded()) {
336329
// @ts-ignore ts is unhappy with the below call to `flatpickr`
337330
this.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);
338331
// if (and only if) the initialization succeeded, we can set the date values
@@ -348,7 +341,7 @@ export class DatePicker implements
348341
onFocus() {
349342
// Updates the month manually when calendar mode is range because month
350343
// will not update properly without manually updating them on focus.
351-
if (this.range) {
344+
if (this.datePickerType === "range") {
352345
if (this.rangeInput.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[1]) {
353346
const currentMonth = this.flatpickrInstance.selectedDates[1].getMonth();
354347
this.flatpickrInstance.changeMonth(currentMonth, false);
@@ -414,7 +407,7 @@ export class DatePicker implements
414407
onValueChange(event: string) {
415408
if (this.isFlatpickrLoaded()) {
416409
const date = this.flatpickrInstance.parseDate(event, this.dateFormat);
417-
if (this.range) {
410+
if (this.datePickerType === "range") {
418411
this.setDateValues([date, this.flatpickrInstance.selectedDates[1]]);
419412
} else {
420413
this.setDateValues([date]);
@@ -438,7 +431,7 @@ export class DatePicker implements
438431
* Handles opening the calendar "properly" when the calendar icon is clicked.
439432
*/
440433
openCalendar(datepickerInput: DatePickerInput) {
441-
if (this.range) {
434+
if (this.datePickerType === "range") {
442435
datepickerInput.input.nativeElement.click();
443436

444437
// If the first input's calendar icon is clicked when calendar is in range mode, then
@@ -469,7 +462,7 @@ export class DatePicker implements
469462
* Handles the initialization of event listeners for the datepicker input and range input fields.
470463
*/
471464
protected addInputListeners() {
472-
if (!this.isFlatpickrLoaded()) {
465+
if (this.datePickerType === "simple" || !this.isFlatpickrLoaded()) {
473466
return;
474467
}
475468

@@ -520,7 +513,7 @@ export class DatePicker implements
520513
* @param newDates An optional SimpleChange of date values
521514
*/
522515
protected resetFlatpickrInstance(newDates?: SimpleChange) {
523-
if (this.isFlatpickrLoaded()) {
516+
if (this.datePickerType !== "simple" && this.isFlatpickrLoaded()) {
524517
let dates = this.flatpickrInstance.selectedDates;
525518
if (newDates && this.didDateValueChange(newDates.currentValue, newDates.previousValue)) {
526519
dates = newDates.currentValue;
@@ -646,7 +639,7 @@ export class DatePicker implements
646639
// In range mode, if a date is selected from the first calendar that is from the previous month,
647640
// the month will not be updated on the calendar until the calendar is re-opened.
648641
// This will make sure the calendar is updated with the correct month.
649-
if (this.range && this.flatpickrInstance.selectedDates[0]) {
642+
if (this.datePickerType === "range" && this.flatpickrInstance.selectedDates[0]) {
650643
const currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();
651644

652645
// `flatpickrInstance.changeMonth` removes the focus on the selected date element and will

0 commit comments

Comments
 (0)