angular-material-components: Selected time is not being shown in dateTime picker

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

bug

default value of form control is:

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

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

About this issue

Original URL
State: open
Created 4 years ago
Comments: 20 (5 by maintainers)

Most upvoted comments

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

ramonvic on Oct 17, 2020

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 on Mar 27, 2020

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.

h2qutc on Mar 24, 2020