0

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

1 Answer 1

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

Sign up to request clarification or add additional context in comments.

4 Comments

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?
it is imported from '@angular/material', so we should not much bother about internal implementation of angular material. That's what I think
oke, but so I need to instalal: 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?
Might be, not sure but as per me it should work only with material, you can try that

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.