How can I customize date and time format in ngx-mat-datetime-picker?
Solution 1
You need to create a custom adapter and specify the custom formats
const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
parse: {
dateInput: 'l, LTS'
},
display: {
dateInput: 'YYYY-MM-DD HH:mm:ss',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
}
};
@NgModule({
providers: [
{
provide: NgxMatDateAdapter,
useClass: CustomNgxDatetimeAdapter,
deps: [MAT_DATE_LOCALE, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS]
},
{ provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }
],
})
export class CustomNgxDateTimeModule { }
Please find the CustomNgxDatetimeAdapter.ts from the below gist
https://gist.github.com/nandhakumargdr/635af05419793e15f3758656ddd1ef39
Have tested it. It is working!
Solution 2
You can find more examples here https://github.com/h2qutc/angular-material-components/issues/27
Solution 3
Create a constant: (insert your preferred format)
export const DATE_TIME_FORMAT = {
parse: {
dateInput: 'l, LT',
},
display: {
dateInput: 'l, LT',
monthYearLabel: 'MM yyyy',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
}
Provide:
{provide: NGX_MAT_DATE_FORMATS, useValue: DATE_TIME_FORMAT}
result (with my format removing the seconds):
9/4/2020, 1:11 PM
Related videos on Youtube
Gnik
Freelancer. Very passionate in code and software architecting. Always eager to take up the challenge and learn new technologies. Very quick learner and adaptive.
Updated on June 04, 2022Comments
-
Gnik almost 2 years
I am working on Angular7 and its compatible ngx-mat-datetime-picker. It works as expected.
Want to customize the format:
Actual:
mm/dd/yyyy, hh:mm:ss
Expected:yyyy-mm-dd hh:mm:ss
Currently I don't find any option for formatting.
I tried something like this in template
value="{{ mydate | date: 'yyyy-mm-dd hh:mm:ss' }}
But not working.
-
Nandhakumar Appusamy over 3 yearsLet me know if you need the CustomNgxDatetimeAdapter class. I'll update the answer with the CustomNgxDatetimeAdapter code.
-
Brackets over 3 yearsPlease add CustomNgxDatetimeAdapter class
-
Nandhakumar Appusamy over 3 yearsEdited the answer please find the gist
-
Nandhakumar Appusamy over 3 yearsgist.github.com/nandhakumargdr/635af05419793e15f3758656ddd1ef39 - Anyway I'm attaching it here.
-
RickyTad over 2 yearsIs it be possible to customize the ngx-mat-datetime-picker to be used as a datetime range component ( from ... to) ?
-
maersk about 2 years@NandhakumarAppusamy Could you please post a full working example? And is it possible to switch between local time and UTC at runtime?