Selected time is not being shown in dateTime picker about angular-material-components HOT 20 OPEN

@apansky, you are right, is that the problem.
For anyone who is using outline style as global, you can add a custom css to resize the time inputs:
For me this worked:

    ngx-mat-timepicker {
        .mat-form-field-appearance-outline {
            width: 50px !important;
            max-width: 50px !important;
            .mat-form-field-wrapper {
                padding-bottom: 0;
            }

            .mat-form-field-infix {
                border-top: 0.36em solid transparent;
            }
        }
    }

from angular-material-components.

Hi,
Do you use the latest version of @angular-material-components/datetime-picker and @angular-material-components/moment-adapter plz ? It is now v2.0.1.
Make sure that you added NgxMatMomentModule instead of NgxMatNativeDateModule in your module.
I've alreadry tested your code here and it worked.

from angular-material-components.

You imported MatDatepickerModule that can override the MAT_DATE_LOCALE.
Can you try to remove MatDatepickerModule in your module, juste use NgxMatDatepickerModule?
I will add a @input to hide/show the time part in the picker to prevent the usage of MatDatepickerModule.

from angular-material-components.

Hey. so I have cross checked things. I am using the latest version.

Below is my module file snap

I am using custom date adapter to provide my own time zone rather system's one

and here is my html

I still cant figure it out why time is not showing up...

from angular-material-components.

@airasyaqub The version @angular-material-components/datetime-picker v2.0.3 is now available.
Can you check it out for your problem above please ?

from angular-material-components.

Ok so I updated the package. Thing is if I remove MatDatepickerModule It gives below error obvio:

I alos still cant import NgxMatDatepickerModule

if I add MatDatepickerModule it gives below error:

from angular-material-components.

Basically I am importing these modules

NgxMatDatetimePickerModule: For date time functionality,
NgxMatMomentModule: To use moment instead native Date functionality,
NgxMatDateAdapter: To implement custom date adapter,

What additional modules should I add now ?

from angular-material-components.

@airasyaqub In latest version of datetime picker, you have a input @hidetime to hide the time so you would not need to use MatDatepickerModule.
For the modules, I think that it is enough.
If you can provide an example of codes in https://stackblitz.com/, il will be useful

from angular-material-components.

Thing is we use mat-datepicker-toggle in our component. That's the reason if we don't import MatDatepickerModule we will get error as mentioned above. I went to your live demo code too. You are also importing MatDatepickerModule. Maybe you haven't updated your live demo code with updated package. I will try to provide the stackbliz for you. Thanks

from angular-material-components.

Well somehow ur version 2.0.4 fixed the issue.

from angular-material-components.

Hello, I've installed v. 2.0.4 but got same problem.
The time is not showing ... please help! @h2qutc

from angular-material-components.

@ykk1991 Do you have any errors on F12 console ? Can you take a snapshot to show how the datepicker is shown ?

from angular-material-components.

@h2qutc
no errors, everything is ok...
I've done everything as shown in startblitz project...

from angular-material-components.

Same issue is happening to me but what i found out, its happening only when i set default options for mat-form-field, like this
{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline', floatLabel: 'auto' } },
if i comment this auto, time is visible..

from angular-material-components.

OK, i think i found out what the problem might be.

as you can see, you are counting that mat-form-field appearence="legacy" wlll be used, legacy does not have any padding so the width: 20px is sufficient, but when you use any other appearence on form field, there is padding on x axis.. so, hope you get what i mean

from angular-material-components.

I am also facing same issue please let me know if anyone got any solution on this...would be appreciate. thanks in advance.

from angular-material-components.

"@angular/material": "^14.0.4"
"@angular-material-components/datetime-picker": "^8.0.0"

Selected time is still not being shown in text box, Can someone able to help with this issue ?

from angular-material-components.

{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' }, /* This is the issue. The 'en-GB' is simply a date-only format. Try the below code, and hopefully, it resolves the issue.

providers: [ { provide: MAT_DATE_LOCALE, useValue: { parse: { dateInput: 'YYYY-MM-DD', monthInput: 'MMMM', yearInput: 'YYYY', timeInput: 'HH:mm', datetimeInput: 'YYYY-MM-DD HH:mm', }, display: { dateInput: 'YYYY-MM-DD', monthInput: 'MMMM', yearInput: 'YYYY', timeInput: 'HH:mm', datetimeInput: 'YYYY-MM-DD HH:mm', monthYearLabel: 'YYYY MMMM', dateA11yLabel: 'LL', monthYearA11yLabel: 'MMMM YYYY', popupHeaderDateLabel: 'MMM DD, ddd', }, }, }, ],

from angular-material-components.

this did not work for me, can anyone suggest me the solution for this

from angular-material-components.

I added the below style and time display problem fixed for me

    ngx-mat-timepicker {
        .mat-mdc-form-field-flex {
            padding: 0 !important;
        }
    }

from angular-material-components.