From 07d0a5f89296042cda5980bdd744d064bd7b51e2 Mon Sep 17 00:00:00 2001 From: Klaas Cuvelier Date: Mon, 18 Mar 2024 20:12:19 +0100 Subject: [PATCH] Datepicker update --- .../datepicker-input.component.ts | 149 ++++++++---------- src/datepicker/datepicker.component.ts | 111 ++++++------- src/datepicker/datepicker.stories.ts | 15 +- 3 files changed, 130 insertions(+), 145 deletions(-) diff --git a/src/datepicker-input/datepicker-input.component.ts b/src/datepicker-input/datepicker-input.component.ts index dd8e4039f7..9bb4495643 100644 --- a/src/datepicker-input/datepicker-input.component.ts +++ b/src/datepicker-input/datepicker-input.component.ts @@ -5,93 +5,81 @@ import { EventEmitter, ElementRef, TemplateRef, - ViewChild + ViewChild, HostBinding } from "@angular/core"; import { NG_VALUE_ACCESSOR } from "@angular/forms"; @Component({ selector: "cds-date-picker-input, ibm-date-picker-input", template: ` -
-
+ {{label}} + + +
-
- -
+ - - - - - - - - - -
-
- {{helperText}} - -
-
- {{invalidText}} - -
-
- {{warnText}} - -
-
+ 'cds--date-picker__input--sm': size === 'sm', + 'cds--date-picker__input--md': size === 'md', + 'cds--date-picker__input--lg': size === 'lg' + }" + [attr.data-invalid]="invalid ? true : undefined" + [value]="value" + [pattern]="pattern" + [placeholder]="placeholder" + [id]= "id" + [disabled]="disabled" + (change)="onChange($event)" + /> + + + + + + + +
+
+ {{helperText}} + +
+
+ {{invalidText}} + +
+
+ {{warnText}} +
-
`, providers: [ { @@ -99,7 +87,10 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms"; useExisting: DatePickerInput, multi: true } - ] + ], + host: { + "class": 'cds--date-picker-container' + } }) export class DatePickerInput { private static datePickerCount = 0; @@ -111,8 +102,6 @@ export class DatePickerInput { @Input() id = `datepicker-${DatePickerInput.datePickerCount++}`; - @Input() hasIcon = false; - @Input() label: string | TemplateRef; @Input() placeholder = "mm/dd/yyyy"; diff --git a/src/datepicker/datepicker.component.ts b/src/datepicker/datepicker.component.ts index 46806ac2be..afa7f0ac0d 100644 --- a/src/datepicker/datepicker.component.ts +++ b/src/datepicker/datepicker.component.ts @@ -58,54 +58,50 @@ if (languages.default?.default["en"]?.weekdays) {
-
- - -
- -
- - -
+ + + + +
`, @@ -126,10 +122,7 @@ export class DatePicker implements AfterViewInit { private static datePickerCount = 0; - /** - * Select calendar range mode - */ - @Input() range = false; + @Input() datePickerType: "simple" | "single" | "range" = "simple"; /** * Format of date @@ -228,11 +221,11 @@ export class DatePicker implements } get flatpickrOptions(): Partial { const plugins = [...this.plugins, carbonFlatpickrMonthSelectPlugin]; - if (this.range) { + if (this.datePickerType === "range") { plugins.push(rangePlugin({ input: `#${this.id}-rangeInput`, position: "left" })); } return Object.assign({}, this._flatpickrOptions, this.flatpickrBaseOptions, { - mode: this.range ? "range" : "single", + mode: this.datePickerType === "range" ? "range" : "single", plugins, dateFormat: this.dateFormat, locale: languages.default?.default[this.language] || languages.default[this.language] @@ -268,7 +261,7 @@ export class DatePicker implements onClose: (date) => { // This makes sure that the `flatpickrInstance selectedDates` are in sync with the values of // the inputs when the calendar closes. - if (this.range && this.flatpickrInstance) { + if (this.datePickerType === "range" && this.flatpickrInstance) { const inputValue = this.input.input.nativeElement.value; const rangeInputValue = this.rangeInput.input.nativeElement.value; if (inputValue || rangeInputValue) { @@ -332,7 +325,7 @@ export class DatePicker implements // and because we rely on a library that operates outside the Angular view of the world // we need to keep trying to load the library, until the relevant DOM is actually live ngAfterViewChecked() { - if (!this.isFlatpickrLoaded()) { + if (this.datePickerType !== "simple" && !this.isFlatpickrLoaded()) { // @ts-ignore ts is unhappy with the below call to `flatpickr` this.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions); // if (and only if) the initialization succeeded, we can set the date values @@ -348,7 +341,7 @@ export class DatePicker implements onFocus() { // Updates the month manually when calendar mode is range because month // will not update properly without manually updating them on focus. - if (this.range) { + if (this.datePickerType === "range") { if (this.rangeInput.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[1]) { const currentMonth = this.flatpickrInstance.selectedDates[1].getMonth(); this.flatpickrInstance.changeMonth(currentMonth, false); @@ -414,7 +407,7 @@ export class DatePicker implements onValueChange(event: string) { if (this.isFlatpickrLoaded()) { const date = this.flatpickrInstance.parseDate(event, this.dateFormat); - if (this.range) { + if (this.datePickerType === "range") { this.setDateValues([date, this.flatpickrInstance.selectedDates[1]]); } else { this.setDateValues([date]); @@ -438,7 +431,7 @@ export class DatePicker implements * Handles opening the calendar "properly" when the calendar icon is clicked. */ openCalendar(datepickerInput: DatePickerInput) { - if (this.range) { + if (this.datePickerType === "range") { datepickerInput.input.nativeElement.click(); // If the first input's calendar icon is clicked when calendar is in range mode, then @@ -469,7 +462,7 @@ export class DatePicker implements * Handles the initialization of event listeners for the datepicker input and range input fields. */ protected addInputListeners() { - if (!this.isFlatpickrLoaded()) { + if (this.datePickerType === "simple" || !this.isFlatpickrLoaded()) { return; } @@ -520,7 +513,7 @@ export class DatePicker implements * @param newDates An optional SimpleChange of date values */ protected resetFlatpickrInstance(newDates?: SimpleChange) { - if (this.isFlatpickrLoaded()) { + if (this.datePickerType !== "simple" && this.isFlatpickrLoaded()) { let dates = this.flatpickrInstance.selectedDates; if (newDates && this.didDateValueChange(newDates.currentValue, newDates.previousValue)) { dates = newDates.currentValue; @@ -646,7 +639,7 @@ export class DatePicker implements // In range mode, if a date is selected from the first calendar that is from the previous month, // the month will not be updated on the calendar until the calendar is re-opened. // This will make sure the calendar is updated with the correct month. - if (this.range && this.flatpickrInstance.selectedDates[0]) { + if (this.datePickerType === "range" && this.flatpickrInstance.selectedDates[0]) { const currentMonth = this.flatpickrInstance.selectedDates[0].getMonth(); // `flatpickrInstance.changeMonth` removes the focus on the selected date element and will diff --git a/src/datepicker/datepicker.stories.ts b/src/datepicker/datepicker.stories.ts index 19f875a637..bdc8ad5686 100644 --- a/src/datepicker/datepicker.stories.ts +++ b/src/datepicker/datepicker.stories.ts @@ -41,7 +41,7 @@ export default { const Template = (args) => ({ props: args, template: ` - ({ [warn]="warn" [warnText]="warnText" (valueChange)="valueChange($event)"> - + ` }); export const Basic = Template.bind({}); @@ -65,6 +65,7 @@ const SingleTemplate = (args) => ({ [label]="label" id="initial-value-datepicker" [placeholder]="placeholder" + [datePickerType]="'single'" [language]="language" [size]="size" [theme]="theme" @@ -83,6 +84,7 @@ const SingleTemplate = (args) => ({ [placeholder]="placeholder" [language]="language" [size]="size" + [datePickerType]="'single'" [theme]="theme" [disabled]="disabled" [invalid]="invalid" @@ -96,8 +98,9 @@ const SingleTemplate = (args) => ({ }); export const Single = SingleTemplate.bind({}); Single.args = { - dateFormat: "m/d/y", - language: "en" + dateFormat: "m/d/Y", + language: "en", + value: "01/01/24" }; Single.argTypes = { language: { @@ -114,7 +117,7 @@ const RangeTemplate = (args) => ({ [label]="label" [rangeLabel]="label" [size]="size" - range="true" + [datePickerType]="'range'" id="initial-value-range-datepicker" [placeholder]="placeholder" [language]="language" @@ -135,8 +138,8 @@ const RangeTemplate = (args) => ({