Format date with datetime picker to DD-MM-YYYY

Question

I am using DateTime picker from material.

But I want to have the format like this:

2021-02-15 23:59:59

So I try it like this:

export const MY_DATE_FORMATS = {
  parse: {
    dateInput: 'YYYY-MM-DD',
  },
  display: {
    dateInput: 'MMM DD, YYYY',
    monthYearLabel: 'MMMM 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: MY_DATE_FORMATS}]
})

and template looks like this:

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

                <input [(ngModel)]="start" [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 this doesn't work, it still shows this:

2/25/2021, 16:32:52

So what I have to change?

I try it like this:

export class AppDateAdapter extends NativeDateAdapter {
  format(date: Date, displayFormat: Object): string {
    if (displayFormat === 'input') {
      let day: string = date.getDate().toString();
      day = +day < 10 ? '0' + day : day;
      let month: string = (date.getMonth() + 1).toString();
      month = +month < 10 ? '0' + month : month;
      let year = date.getFullYear();
      return `${year}-${month}-${day}`;
    }
    return date.toDateString();
  }
}
export const APP_DATE_FORMATS: MatDateFormats = {
  parse: {
    dateInput: { month: 'short', year: 'numeric', day: 'numeric' },
  },
  display: {
    dateInput: 'input',
    monthYearLabel: { year: 'numeric', month: 'numeric' },
    dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric'
    },
    monthYearA11yLabel: { year: 'numeric', month: 'long' },
  }
};

But I don't use a date picker, But I am using: DateTime picker:

https://stackblitz.com/edit/demo-ngx-mat-datetime-picker?file=src%2Fapp%2Fapp.module.ts

and then it doesn't work.

Answer 1

You could make it yourself by putting together the day, month, and year. I'm not sure if this code is exactly what you want but you could do something similar.

var today = new Date();
var date = today.getDate() + "/" + (today.getMonth() + 1) + "/" + today.getFullYear();

Answer 2

Use thisone for your date format. DateFormat:- this.currentDate = ${this.currDate.getFullYear().toString().padStart(4, '0')}-${(this.currDate.getMonth() + 1).toString().padStart(2, '0')}-${this.currDate.getDate().toString().padStart(2, '0')} ${this.currDate.getHours().toString().padStart(2, '0')}:${this.currDate.getMinutes().toString().padStart(2, '0')}:${this.currDate.getSeconds().toString().padStart(2, '0')}