angular material date-time picker - format the input with date and 24 hour time

Question

I am using https://www.npmjs.com/package/@angular-material-components/datetime-picker for datetime picker for my angular material.io app

I want to format my date input to show time in 24 hours format(02/15/2020 21:05) input right now -->

Documentation talks about creating a custom adapter by extending NgxMatDateAdapter but to extend that I have to implement 20 functions in that class. Any help is appreciated.

Answer 1

I don't think it's directly available. You can read below article if you want to achieve this.

https://medium.com/@amandeepkochhar/angular-material-datepicker-set-custom-date-in-dd-mm-yyyy-format-5c0f4340e57

Answer 2

Use the stackblitz to get your answer.

import {MAT_DATE_FORMATS} from '@angular/material';
export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'YYYY-MM-DD',
    monthYearLabel: 'YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'YYYY',
  },
};

Write the code in your component provider

 providers: [
       {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ]

Answer 3

I think this would help you..

You should set one option enableMeridian.
Because this enableMeridian means : Whether to display 12H or 24H mode. and it's value if true or false. By default it is false..

So I think your code will be like this ..

const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
  parse: {
    dateInput: "l, LTS"
  },
  display: {
    dateInput: "l, LTS",
    monthYearLabel: "MMM YYYY",
    dateA11yLabel: "LL",
    monthYearA11yLabel: "MMMM YYYY",
    enableMeridian: true
  }
};

You can refer this link.
https://www.npmjs.com/package/@angular-material-components/datetime-picker