如何使用 Angular material 日期时间选择器格式化日期

Question

我在 google 上搜索了很多。但是我有 material 日期时间选择器。所以不是日期选择器，而是日期时间选择器。我想格式化 date-time ，就像这样的格式：

2021-02-15 23:59:59

但我尝试在没有 moment.js 的情况下进行。因为这不是好的做法。但是，如果没有 moment.js 就无法完成，那就这样吧。

所以我有这个 js 文件：

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();
    } );
  }  
}

这是模板：

  <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>

但是格式还是这样：

2/16/2021, 04:36:32

而不是这种格式：

2021-02-15 23:59:59

那么我必须改变什么？

谢谢

Answer 1

这是对您问题的回答。

我们必须使用-

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

并将定义的格式与上述内容一起传递给提供者

如何使用 Angular material 日期时间选择器格式化日期

How to format date with Angular material datetime picker

javascript

datepicker

typescript

angular-material

angular