Angular 18 #393

GNURub · 2024-06-04T11:42:34Z

Migration to angular 18

Sergiobop · 2024-06-07T11:32:09Z

One can only hope to get this merged, thanks @GNURub

Edit:
If someone wants to try this: https://www.npmjs.com/package/@ngxmc/datetime-picker
npm install --save @ngxmc/datetime-picker
npm install --save @ngxmc/moment-adapter

GNURub · 2024-06-10T07:43:45Z

I published the branch: https://www.npmjs.com/settings/ngxmc/packages

scohen-trinity · 2024-06-14T20:20:03Z

Hey @GNURub, I have been attempting to use your fork for Angular 18 and have been running into some issues with the exposed modules, is there an exposed module for NgxMatDatetimePickerModule?

GNURub · 2024-06-18T06:17:04Z

@scohen-trinity, standalone components:

imports: [
	...,
 	NgxMatDatepickerActions,
    NgxMatDatepickerActions,
    NgxMatDatepickerApply,
    NgxMatDatepickerCancel,
    NgxMatDatepickerInput,
    NgxMatDatepickerToggle,
    NgxMatDatetimepicker,
	...,
],
template:  `<input
                matInput
                [ngxMatDatetimePicker]="event"
                class="hidden"
                formControlName="date"
                [min]="now"
              />
              <ngx-mat-datetime-picker #event>
                <ngx-mat-datepicker-actions>
                  <button mat-button ngxMatDatepickerCancel>Cancel</button>
                  <button
                    mat-raised-button
                    color="primary"
                    ngxMatDatepickerApply
                  >
                    Apply
                  </button>
                </ngx-mat-datepicker-actions>
              </ngx-mat-datetime-picker>`

scohen-trinity · 2024-06-19T14:52:43Z

@GNURub thank you for the clarification and I was able to get everything working with the standalone components with one issue with one of the ES Module files, I get this error message:

[vite] error while updating dependencies:
Error: Build failed with 1 error:
error: Cannot create property 'message' on string 'C:\dev\project\node_modules\@ngxmc\datetime-picker\fesm2022\ngxmc-datetime-picker.mjs: Errors found in the template:
<ng-content> element cannot have content. (""disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple()\"\n>\n  [ERROR ->]<ng-content select=\"[ngxMatDatepickerToggleIcon]\">\n    <svg\n      class=\"mat-datepicker-toggle-d"): C:\dev\project\node_modules\@ngxmc\datetime-picker\fesm2022\ngxmc-datetime-picker.mjs@5110:1758

I don't think that I added any input to the package and this prevents the project from building, can you help me troubleshoot this?

GNURub · 2024-06-21T14:07:50Z

@scohen-trinity share the pice of code and ng version

ghost · 2024-07-19T03:57:05Z

please do merge this branch, there only one library in our project which is waiting for the update to Angular 18.

Sergiobop · 2024-07-25T14:59:26Z

Hi @GNURub, i'm trying to give your solution a try but i found some issues:

Issue 1

An unhandled exception occurred: Missing "./lib/core/date-formats" specifier in "@ngxmc/datetime-picker" package

I figured out the problem, was this import:
import { NgxMatDateFormats } from '@ngxmc/datetime-picker/lib/core/date-formats';

I did:

const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
  parse: {
    dateInput: 'L, LT',
  },
  display: {
    dateInput: 'L, LT',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

Changed to:

const CUSTOM_DATE_FORMATS = {
  parse: {
    dateInput: 'L, LT',
  },
  display: {
    dateInput: 'L, LT',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

And it works

Other working solution is avoid creating the constant and provide the value directly:

...
{
      provide: NGX_MAT_DATE_FORMATS,
      useValue: {
        parse: {
          dateInput: 'L, LT',
        },
        display: {
          dateInput: 'L, LT',
          monthYearLabel: 'MMM YYYY',
          dateA11yLabel: 'LL',
          monthYearA11yLabel: 'MMMM YYYY',
        },
      },
    },
    ..

Issue 2

The mat-calendar-body-label padding is broken:
Before:

After:

Issue 3

The buttons to change the time are disabled when the date is not yet selected, but the color is wrong:

Issue 4

Changing month using arrows, this warning will appear (track is wrong)

Thanks again for your work on this branch, i think we can maybe save the lib

Sergiobop · 2024-07-25T15:15:29Z

@GNURub I updated my comment pointing some issues i found while testing the branch, i hope it helps!

Sergiobop · 2024-08-01T11:56:58Z

Hi @GNURub , Github notified me that you did some work here.

I tested everything again, only problem left is "Issue 3", the arrow buttons color when disabled is still black (instead of grey-disabled color)

Thanks again for your work 👍

GNURub · 2024-08-02T06:04:09Z

I found a very interesting alternative (M3). ng-matero

hassanITXI · 2024-08-27T09:41:04Z

@GNURub if this is approved and not merged is this github not maintained anymore ? should we use https://www.npmjs.com/package/@ngxmc/datetime-picker

capraibex · 2024-11-14T07:56:08Z

@h2qutc
Are there any plans to merge this PR?
It would be really nice, to have an updated version of this package :)

ewalke31 · 2024-11-19T21:44:11Z

@GNURub could you update for Angular 19?

GNURub · 2024-11-19T22:15:49Z

Yeah. I am going to keep it

ChristianLoosliVGT · 2024-11-20T07:05:04Z

can you estimate when you will support angular 19 material?

GNURub · 2024-11-20T10:41:08Z

It is very coupled with material, I have taken a look and in v19 they have deprecated many of the methods that this package uses... At the moment v19 is using angular v19 and v18 in material.

V19

ChristianLoosliVGT · 2024-11-20T13:28:44Z

I have tried to use https://www.npmjs.com/package/@ngxmc/color-picker/v/19.0.0:

import { MAT_COLOR_FORMATS, NgxMatColorPickerModule, NGX_MAT_COLOR_FORMATS } from '@ngxmc/color-picker';

--> TS2724: '@ngxmc/color-picker' has no exported member named NgxMatColorPickerModule. Did you mean NgxMatColorPickerInput

GuillaumeBenini · 2024-11-25T19:26:20Z

I have tried to use https://www.npmjs.com/package/@ngxmc/color-picker/v/19.0.0:

import { MAT_COLOR_FORMATS, NgxMatColorPickerModule, NGX_MAT_COLOR_FORMATS } from '@ngxmc/color-picker';

--> TS2724: '@ngxmc/color-picker' has no exported member named NgxMatColorPickerModule. Did you mean NgxMatColorPickerInput

I would guess the component is now exported as standalone rather than through an NgModule.

serg-mois-capital · 2024-12-09T08:50:44Z

@GNURub but how to install it with material 18 and angular 19 ? With --force still getting:

./node_modules/@ngxmc/datetime-picker/fesm2022/ngxmc-datetime-picker.mjs:4307:34-49 - Error: export 'mixinErrorState' (imported as 'mixinErrorState') was not found in '@angular/material/core'

./node_modules/@ngxmc/datetime-picker/fesm2022/ngxmc-datetime-picker.mjs:5506:37-47 - Error: export 'mixinColor' (imported as 'mixinColor') was not found in '@angular/material/core' (possible exports: n '@angular/material/core'

choucry13 · 2024-12-11T11:07:38Z

hi, i have the same issue than @serg-mois-capital . Material removes use of mixinErrorState. It's same for mixinColor.

GNURub · 2024-12-13T12:41:22Z

v19.1.0

serg-mois-capital · 2024-12-13T14:21:28Z

God bless you @GNURub

cincilkka · 2025-02-21T17:42:47Z

projects/moment-adapter/src/lib/moment-adapter.ts

@@ -147,7 +142,7 @@ export class NgxMatMomentAdapter extends NgxMatDateAdapter<Moment> {
  }

  clone(date: Moment): Moment {
-    return date.clone().locale(this.locale);
+    return date.clone().locale(this.dateLocale);


Why changed to dateLocale? It is initialized in constructor and its value can never be changed via setLocale() method. That means that there is no way how to reflect application locale changes in adapter... As you can see, this leads to two different locales handle by picker. (Days of week have 'cs' locale but month selector and display format is 'en').

You can change it via the 'MAT_DATE_LOCALE' token

I tried but moment adapter does not reflect changes of MAT_DATE_LOCALE, it takes only provided value it in main.ts {provide: MAT_DATE_LOCALE, useValue: 'cs-CZ' }. But not dynamically from any other component. Native adapter works as expected because it sets locale based on MAT_DATE_LOCALE in constructor but then works only with "locale" variable. Moment adapter uses both "locale" and "dateLocale" and I think that there is a problem. Or please do you have any working example how to change it dynamically?

I'm going to deprecate the custom providers of this library, to use the ones from material that already have time support. We will support the ones from material which are: material-date-fns-adapter, material-luxon-adapter and material-moment-adapter. I'm testing, please be patient.

@cincilkka for you: https://stackblitz.com/edit/bgwkmexc?file=package.json,src%2Fexample%2Fdatepicker-locale-example.html,src%2Fexample%2Fdatepicker-locale-example.ts,src%2Fmain.ts,src%2Fexample%2Fdatepicker-locale-example.css

Great! Thank you :-) Using adapter from Material seems to me like the best option. I will wait for final version.

GNURub added 8 commits June 3, 2024 15:54

updated

92fd65d

updated

061e7c4

updated

e54e1f7

migration angular 18

42f8693

migration angular 18

d659b02

migration angular 18

c4452f3

migration angular 18

abb4c30

prettier

a129e5e

chore: Update color-picker component HTML formatting

dc4d54c

GNURub added 3 commits June 10, 2024 10:40

feat: Update datetime-picker component imports and providers

320684c

chore: Update datetime-picker component imports and providers

fa652e1

chore: Update datetime-picker component imports and providers

490686c

GNURub added 5 commits August 1, 2024 08:23

chore: Update dependencies and test files, unnecessary deps

5594bbd

fix: Add NgxMatDateFormats to datetime-picker core exports

2bffc3f

chore: Update datetime-picker component imports and providers

6f5d8c0

chore: Update datetime-picker component HTML formatting

1117c3a

fix: padding label month

8dc12cb

feat: Update timepicker component to disable SVG when disabled

670503c

ugolman88 approved these changes Aug 12, 2024

View reviewed changes

Sergiobop mentioned this pull request Aug 19, 2024

Angular 17 #371

Draft

renandegrandi mentioned this pull request Nov 19, 2024

Angular v18 migration issue #395

Open

cincilkka reviewed Feb 21, 2025

View reviewed changes

jose-alvarez-r approved these changes Mar 14, 2025

View reviewed changes

Angular 18 #393

Are you sure you want to change the base?

Angular 18 #393

Uh oh!

Conversation

GNURub commented Jun 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Sergiobop commented Jun 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

GNURub commented Jun 10, 2024

Uh oh!

scohen-trinity commented Jun 14, 2024

Uh oh!

GNURub commented Jun 18, 2024

Uh oh!

scohen-trinity commented Jun 19, 2024

Uh oh!

GNURub commented Jun 21, 2024

Uh oh!

ghost commented Jul 19, 2024

Uh oh!

Sergiobop commented Jul 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue 1

Issue 2

Issue 3

Issue 4

Uh oh!

Sergiobop commented Jul 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Sergiobop commented Aug 1, 2024

Uh oh!

GNURub commented Aug 2, 2024

Uh oh!

hassanITXI commented Aug 27, 2024

Uh oh!

capraibex commented Nov 14, 2024

Uh oh!

ewalke31 commented Nov 19, 2024

Uh oh!

GNURub commented Nov 19, 2024

Uh oh!

ChristianLoosliVGT commented Nov 20, 2024

Uh oh!

GNURub commented Nov 20, 2024

Uh oh!

ChristianLoosliVGT commented Nov 20, 2024

Uh oh!

GuillaumeBenini commented Nov 25, 2024

Uh oh!

serg-mois-capital commented Dec 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

choucry13 commented Dec 11, 2024

Uh oh!

GNURub commented Dec 13, 2024

Uh oh!

serg-mois-capital commented Dec 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cincilkka Feb 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

GNURub Feb 24, 2025

Choose a reason for hiding this comment

Uh oh!

cincilkka Feb 24, 2025

Choose a reason for hiding this comment

Uh oh!

GNURub Feb 24, 2025

Choose a reason for hiding this comment

Uh oh!

GNURub Feb 24, 2025

Choose a reason for hiding this comment

Uh oh!

cincilkka Feb 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

GNURub commented Jun 4, 2024 •

edited

Loading

Sergiobop commented Jun 7, 2024 •

edited

Loading

Sergiobop commented Jul 25, 2024 •

edited

Loading

Sergiobop commented Jul 25, 2024 •

edited

Loading

serg-mois-capital commented Dec 9, 2024 •

edited

Loading

serg-mois-capital commented Dec 13, 2024 •

edited

Loading

cincilkka Feb 21, 2025 •

edited

Loading

cincilkka Feb 24, 2025 •

edited

Loading