Documentation Request - date formatting in the input and dialog to alter the date format

[KeithPepin-CyG]

Thank you for providing the great date/time picker. I've been able to include it in my project and have the basic functionality for it in place. I do have several questions about how to get it to display things in different formats though and don't really understand how to configure the adapters.

In my shared material module I've included the MatMomentDatetimeModule,
MatDatetimepickerModule. I have not yet set any providers to customize the format in this module, though from what I've read, I realize this may be required? I then created a component to wrap the datetimepicker. The component markup is the standard from your examples:

<form [formGroup]="group">
  <mat-form-field>
    <mat-placeholder>Start Date and Time</mat-placeholder>
    <mat-datetimepicker-toggle
      [for]="datetimePicker"
      matSuffix></mat-datetimepicker-toggle>
    <mat-datetimepicker
      #datetimePicker
      type="datetime"
      openOnFocus="true"
      timeInterval="5"></mat-datetimepicker>
    <input
      matInput
      formControlName="starttime"
      [matDatetimepicker]="datetimePicker"
      required
      autocomplete="false" />
  </mat-form-field>
</form>

and the .ts file is fairly standard as well:

import { AfterViewInit, Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
import { InvestigateTrafficRequestModel } from '../../../shared/models/investigate-traffic-request.model';
import { FormControl, FormGroup } from '@angular/forms';
import { Moment } from 'moment';
import * as moment from 'moment';
import { MatDatetimepicker } from '@mat-datetimepicker/core';


@Component({
  selector: 'app-traffic-filter-controls',
  templateUrl: './traffic-filter-controls.component.html',
  styleUrls: ['./traffic-filter-controls.component.css']
})
export class TrafficFilterControlsComponent implements OnInit, OnChanges, AfterViewInit {
  @Input() filterObject: InvestigateTrafficRequestModel = new InvestigateTrafficRequestModel();
  @ViewChild(MatDatetimepicker) datetimePicker: MatDatetimepicker<Moment>;
  public group: FormGroup;
  public isValidMoment = false;

  constructor() {
  }

  ngOnInit() {
    this.group = new FormGroup({
      starttime: new FormControl(moment(this.filterObject.timeRange.start))
    });
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);

  }

  ngAfterViewInit(){
    this.datetimePicker.selectedChanged.subscribe(
      (newDate: Moment) => {
        this.isValidMoment = moment.isMoment(newDate);
      },
      (error) => {
        throw Error(error);
      }
    );
  }
}

Here are my questions... If I want to customize the way the input displays the selected datetime, what changes would I need to make to have it appear in the same format as the angular date pipe medium format (MMM d, y, h:mm:ss a)?

Similarly, the datetimepicker popup currently displays the time in a 24 hour clock format. If I wanted it to display a 12 hour clock format with AM/PM selectors how would I change my code to make that happen?

Thanks in advance for any suggestions.

[kuhnroyal]

This datetime adapter just extends the @angular/material dateadapter. All the configuration works the same way, just with some added options.

You can follow the last example on this page https://material.angular.io/components/datepicker/examples

• provide a custom instance of MatDatetimeFormats with the MAT_DATETIME_FORMATS injection token
• the moment adapter uses this as default: MAT_MOMENT_DATETIME_FORMATS

With this you can customize display and parse formats, but AM/PM is not supported.

[KeithPepin-CyG]

Thanks for the reply @kuhnroyal. I had read through the adapter documentation from the folks on the Angular team, and it didn't make sense to me yet. I was hoping for more detailed examples than the singular one they provided. I'll keep plucking away at it and see what I can come up with.

The lack of am / pm for the clock is a bit disappointing. Is that a feature you are considering for the future?

[kuhnroyal]

I have added a format configuration to the moment example.
See moment.component.ts

Unfortunately I don't need am/pm and I have the time to work on it anytime soon. Unless somebody provides a PR, I don't see this happening. Sorry.