P
P
prolina2020-08-31 23:19:56
Angular
prolina, 2020-08-31 23:19:56

moment.js date editing?

I am using angular material datepicker in my application. For date formatting, I need to rewrite the NativeDateAdapter functionality. The output in the field must be MM/DD/YYYY. The datepicker has a mask and the possibility of manual entry. Everything works well, but if you edit the date for example: 11/05/1111 (November 5, 1111) in the middle, that is, instead of the 5th, make the 6th, then the date will be displayed like this: 11/06/0111. I would like the date to be 11/06/1111 in this case. It is worth noting that with subsequent editing - everything is fine (if you already edit the date 11/06/0111).

export class AppDateAdapter extends NativeDateAdapter {

  public format(date: Date, displayFormat: Object): string {

    if (displayFormat === 'input') {
      let d = _moment(date).format('MM/DD/YYYY');
      return formatDate(d, 'MM/dd/yyyy', 'en-US');
      // const year: number = date.getFullYear();
      // const month: string = `${date.getMonth() + 1}`.padStart(2, '0');
      // const day: string = `${date.getDate()}`.padStart(2, '0');
      // return `${month}/${day}/${year}`;
    }
    return date.toDateString();
  }

  public parse(value: any): Date | null {
    const date: Moment = _moment(value, 'MM/DD/YYYY');
    return date.isValid() ? date.toDate() : null;
  }
}


export const PICK_FORMATS = {
  parse: {
    dateInput: 'MM/DD/YYYY',
  },
  display: {
    dateInput: 'input',
    monthYearLabel: 'MMMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

providers: [
    {
      provide: DateAdapter, useClass: AppDateAdapter,
    },
    {
      provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS,
    },
]

mask directive:
private maskedInputController: any;
  constructor(private element: ElementRef) {
    this.maskedInputController = textMask.maskInput({
      inputElement: this.element.nativeElement,
      mask: [
        new RegExp('\\d'),
        new RegExp('\\d'),
        '/',
        new RegExp('\\d'),
        new RegExp('\\d'),
        '/',
        new RegExp('\\d'),
        new RegExp('\\d'),
        new RegExp('\\d'),
        new RegExp('\\d'),
      ],
      showMask: true,
      guide: false,
    });
  }

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question