Selected time is not being shown in dateTime picker

[airasyaqub]

Everything is working fine but selected time is not being shown in UI input field. I have followed all the steps as per docs.

default value of form control is:

this.todaysDate =  moment().utc().utcOffset(this._timeZone);

this.discountForm = this._fb.group({
  startDate: [this.todaysDate, [Validators.required]],
})

[h2qutc]

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.

[airasyaqub]

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...

[h2qutc]

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.

[h2qutc]

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

[airasyaqub]

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:

[airasyaqub]

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 ?

[h2qutc]

@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

[airasyaqub]

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

[airasyaqub]

Well somehow ur version 2.0.4 fixed the issue.

[ykk1991]

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

[h2qutc]

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

[ykk1991]

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

[apansky]

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..

[apansky]

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

[ramonvic]

@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;
            }
        }
    }

[sanjaylikeminds]

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

[ankit22687]

"@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 ?

[mseltene]

{ 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', }, }, }, ],

[arunrajac]

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

[hamidh2]

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

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