-1

I am searching a lot on google. But I have the material datetime picker. So not the date picker, but the datetime picker. And I want to format the date-time , like in this format:

2021-02-15 23:59:59

But I try to do it without moment.js. Because it is not good practice. But if it can't be done without moment.js then be it.

So I have this js file:

const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
  parse: {
    dateInput: ''
  },
  display: {
    dateInput: 'YYYY-MM-DD HH:mm:ss',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  }
};
@Component({
  selector: 'app-widget-editor',
  templateUrl: './widget-editor.component.html',
  styleUrls: ['./widget-editor.component.css'],
  providers: [
    {provide: DateAdapter, useClass: AppDateAdapter},
    {provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS}

  ]
})
export class WidgetEditorComponent implements OnInit, AfterContentInit {
  @ViewChild('picker') picker;

 
  start: string;
  end: string;
  interval: string;
  duration: string;
  yrange: number[]; 

  constructor(private editorService: EditorService ) {} 

  reOpenCalender() {
    let self = this;
    setTimeout(() => {
      self.picker.open();
    } );
  }  
}

and this is template:

  <div class="form-group row">
                <label for="start" class="editor-label col-sm-4"><strong> Time start:</strong></label>

                <input [(ngModel)]="start" format  [ngModelOptions]="{standalone: true}" type="text" class="date"  id="start" value="start"  matInput [ngxMatDatetimePicker]="picker">
                <ngx-mat-datetime-picker #picker></ngx-mat-datetime-picker>


                <span class="ml-2" (click)= "reOpenCalender()">
                    <fa-icon [icon]="faCalendarAlt" size="1x"    #picker [styles]="{'color': '#B7B7B7'}"
                      ></fa-icon>
                </span>
            </div>

But the format is still like this:

2/16/2021, 04:36:32

and not in this format:

2021-02-15 23:59:59

So what I have to change?

Thank you

mightycode Newton
  • 3,229
  • 3
  • 28
  • 54

1 Answers1

1

here is an answer to your question.

How to change angular material datepicker format

We have to use -

import { MAT_DATE_FORMATS } from '@angular/material';

and pass the defined format to provider along with above

Avinash Rathod
  • 590
  • 4
  • 15
  • Oke, thank you. But So you have to use moment.ts anyway? Because they say it is not good practice. Or it doesn't matter? – mightycode Newton Feb 16 '21 at 04:00
  • it is imported from '@angular/material', so we should not much bother about internal implementation of angular material. That's what I think – Avinash Rathod Feb 16 '21 at 04:03
  • oke, but so I need to instalal: https://www.npmjs.com/package/@angular/material-moment-adapter but after I installed I get this error: ERROR in node_modules/@angular/material-moment-adapter/adapter/moment-date-adapter.d.ts:10:24 - error TS2307: Cannot find module 'moment' or its corresponding type declarations. 10 import { Moment } from 'moment'; So I also need to install moment.ts separately? – mightycode Newton Feb 16 '21 at 04:09
  • Might be, not sure but as per me it should work only with material, you can try that – Avinash Rathod Feb 16 '21 at 10:04