Skip to content

Commit df1790e

Browse files
klaascuvelierklaascuvelier
committed
Datepicker update
1 parent 7eb80c7 commit df1790e

File tree

3 files changed

+130
-142
lines changed

3 files changed

+130
-142
lines changed

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

+69-79
Original file line numberDiff line numberDiff line change
@@ -5,101 +5,91 @@ 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"
34-
[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>
28+
<span>
29+
<input
30+
#input
31+
*ngIf="!skeleton"
32+
autocomplete="off"
33+
type="text"
34+
class="cds--date-picker__input"
35+
[ngClass]="{
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+
<svg
48+
*ngIf="type !== 'simple' && !warn && !invalid"
49+
cdsIcon="calendar"
50+
size="16"
51+
class="cds--date-picker__icon">
52+
</svg>
53+
<svg
54+
*ngIf="invalid"
55+
class="cds--date-picker__icon cds--date-picker__icon--invalid"
56+
cdsIcon="warning--filled"
57+
size="16">
58+
</svg>
59+
<svg
60+
*ngIf="!invalid && warn"
61+
cdsIcon="warning--alt--filled"
62+
size="16"
63+
class="cds--date-picker__icon cds--date-picker__icon--warn">
64+
</svg>
65+
</span>
66+
</div>
67+
<div
68+
*ngIf="helperText && !invalid && !warn"
69+
class="cds--form__helper-text"
70+
[ngClass]="{'cds--form__helper-text--disabled': disabled}">
71+
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
72+
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
73+
</div>
74+
<div *ngIf="invalid" class="cds--form-requirement">
75+
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
76+
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
77+
</div>
78+
<div *ngIf="!invalid && warn" class="cds--form-requirement">
79+
<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
80+
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
9381
</div>
94-
</div>
9582
`,
9683
providers: [
9784
{
9885
provide: NG_VALUE_ACCESSOR,
9986
useExisting: DatePickerInput,
10087
multi: true
10188
}
102-
]
89+
],
90+
host: {
91+
"class": 'cds--date-picker-container'
92+
}
10393
})
10494
export class DatePickerInput {
10595
private static datePickerCount = 0;

‎src/datepicker/datepicker.component.ts

+52-57
Original file line numberDiff line numberDiff line change
@@ -57,54 +57,52 @@ if (languages.default?.default["en"]?.weekdays) {
5757
<div
5858
class="cds--date-picker"
5959
[ngClass]="{
60-
'cds--date-picker--range' : range,
61-
'cds--date-picker--single' : !range,
60+
'cds--date-picker--simple' : datePickerType === 'simple',
61+
'cds--date-picker--range' : datePickerType === 'range',
62+
'cds--date-picker--single' : datePickerType === 'single',
6263
'cds--date-picker--light' : theme === 'light',
6364
'cds--skeleton' : skeleton
6465
}">
65-
<div class="cds--date-picker-container">
66-
<cds-date-picker-input
67-
#input
68-
[label]="label"
69-
[placeholder]="placeholder"
70-
[pattern]="inputPattern"
71-
[id]="id + '-input'"
72-
[size]="size"
73-
[type]="(range ? 'range' : 'single')"
74-
[hasIcon]="(range ? false : true)"
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-
</div>
86-
87-
<div *ngIf="range" class="cds--date-picker-container">
88-
<cds-date-picker-input
89-
#rangeInput
90-
[label]="rangeLabel"
91-
[placeholder]="placeholder"
92-
[pattern]="inputPattern"
93-
[id]="id + '-rangeInput'"
94-
[size]="size"
95-
[type]="(range ? 'range' : 'single')"
96-
[hasIcon]="(range ? true : null)"
97-
[disabled]="disabled"
98-
[invalid]="rangeInvalid"
99-
[invalidText]="rangeInvalidText"
100-
[warn]="rangeWarn"
101-
[warnText]="rangeWarnText"
102-
[skeleton]="skeleton"
103-
[helperText]="rangeHelperText"
104-
(valueChange)="onRangeValueChange($event)"
105-
(click)="openCalendar(rangeInput)">
106-
</cds-date-picker-input>
107-
</div>
66+
<cds-date-picker-input
67+
#input
68+
[label]="label"
69+
[placeholder]="placeholder"
70+
[pattern]="inputPattern"
71+
[id]="id + '-input'"
72+
[size]="size"
73+
[type]="datePickerType"
74+
[hasIcon]="datePickerType !== 'simple'"
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 ? 'range' : 'single')"
95+
[hasIcon]="(range ? true : null)"
96+
[disabled]="disabled"
97+
[invalid]="rangeInvalid"
98+
[invalidText]="rangeInvalidText"
99+
[warn]="rangeWarn"
100+
[warnText]="rangeWarnText"
101+
[skeleton]="skeleton"
102+
[helperText]="rangeHelperText"
103+
(valueChange)="onRangeValueChange($event)"
104+
(click)="openCalendar(rangeInput)">
105+
</cds-date-picker-input>
108106
</div>
109107
</div>
110108
`,
@@ -125,10 +123,7 @@ export class DatePicker implements
125123
AfterViewInit {
126124
private static datePickerCount = 0;
127125

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

133128
/**
134129
* Format of date
@@ -199,7 +194,7 @@ export class DatePicker implements
199194
*/
200195
@Input() warnText: string | TemplateRef<any>;
201196

202-
@Input() size: "sm" | "md" | "lg" = "md";
197+
@Input() size: "sm" | "md" | "lg" = "sm";
203198
/**
204199
* Set to `true` to display the invalid state for the second datepicker input.
205200
*/
@@ -227,11 +222,11 @@ export class DatePicker implements
227222
}
228223
get flatpickrOptions() {
229224
const plugins = [...this.plugins, carbonFlatpickrMonthSelectPlugin];
230-
if (this.range) {
225+
if (this.datePickerType === "range") {
231226
plugins.push(rangePlugin({ input: `#${this.id}-rangeInput`, position: "left" }));
232227
}
233228
return Object.assign({}, this._flatpickrOptions, this.flatpickrBaseOptions, {
234-
mode: this.range ? "range" : "single",
229+
mode: this.datePickerType === "range" ? "range" : "single",
235230
plugins,
236231
dateFormat: this.dateFormat,
237232
locale: languages.default?.default[this.language] || languages.default[this.language]
@@ -267,7 +262,7 @@ export class DatePicker implements
267262
onClose: (date) => {
268263
// This makes sure that the `flatpickrInstance selectedDates` are in sync with the values of
269264
// the inputs when the calendar closes.
270-
if (this.range && this.flatpickrInstance) {
265+
if (this.datePickerType === "range" && this.flatpickrInstance) {
271266
if (this.flatpickrInstance.selectedDates.length !== 2) {
272267
// we could `this.flatpickrInstance.clear()` but it insists on opening the second picker
273268
// in some cases, so instead we do this
@@ -354,7 +349,7 @@ export class DatePicker implements
354349
onFocus() {
355350
// Updates the month manually when calendar mode is range because month
356351
// will not update properly without manually updating them on focus.
357-
if (this.range) {
352+
if (this.datePickerType === "range") {
358353
if (this.rangeInput.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[1]) {
359354
const currentMonth = this.flatpickrInstance.selectedDates[1].getMonth();
360355
this.flatpickrInstance.changeMonth(currentMonth, false);
@@ -420,7 +415,7 @@ export class DatePicker implements
420415
onValueChange(event: string) {
421416
if (this.isFlatpickrLoaded()) {
422417
const date = this.flatpickrInstance.parseDate(event, this.dateFormat);
423-
if (this.range) {
418+
if (this.datePickerType === "range") {
424419
this.setDateValues([date, this.flatpickrInstance.selectedDates[1]]);
425420
} else {
426421
this.setDateValues([date]);
@@ -444,7 +439,7 @@ export class DatePicker implements
444439
* Handles opening the calendar "properly" when the calendar icon is clicked.
445440
*/
446441
openCalendar(datepickerInput: DatePickerInput) {
447-
if (this.range) {
442+
if (this.datePickerType === "range") {
448443
datepickerInput.input.nativeElement.click();
449444

450445
// If the first input's calendar icon is clicked when calendar is in range mode, then
@@ -652,7 +647,7 @@ export class DatePicker implements
652647
// In range mode, if a date is selected from the first calendar that is from the previous month,
653648
// the month will not be updated on the calendar until the calendar is re-opened.
654649
// This will make sure the calendar is updated with the correct month.
655-
if (this.range && this.flatpickrInstance.selectedDates[0]) {
650+
if (this.datePickerType === "range" && this.flatpickrInstance.selectedDates[0]) {
656651
const currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();
657652

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

0 commit comments

Comments
 (0)