4

I would like to expose my date value as date only ("yyyy-MM-dd") on an Angular Material date picker. Currently, the default date value is an ISO format (includes time).

I have a starter Stackblitz project with the the required setup. The formly-datepicker.type is where I would like to centralize the conversion so that any date used in the model will be formatted properly for the service layer.

One of my attempts to accomplish it in a centralized manner is using the Angular ControlValueAccessor, but the value is never updated. ControlValueAccessor Stackblitz

In the example Stackblitz, after changing the date and clicking Submit the value I need returned would be something like: {"mydate":"1940-03-11"}(without the time information).

ctaleck
  • 1,658
  • 11
  • 20
  • Please check my answer and let me know if you still facing any problem. Best wishes :-) – Srijon Chakraborty Feb 06 '21 at 08:55
  • I have created a new [Stackblitz](https://stackblitz.com/edit/angular-formly-material-datepicker-accessor-attempt1-xe8-a5io8t?file=src/app/components/formly-datepicker-type/formly-datepicker-type.component.html) attempt with a solution that uses `ngModel` instead of `ControlValueAccessor`. While it works, it simply acts a wrapper around Angular Material Datepicker to achieve what I want. I would still like some help on achieving the solution with best practices using a `DateAdapter`, for example. – ctaleck Feb 10 '21 at 17:04
  • By way of comparison, the default `input type="date"` in HTML emits "YYYY-MM-DD" as a proper date value (i.e. no time part)! See the [Stackblitz](https://stackblitz.com/edit/angular-formly-material-datepicker-accessor-attempt1-xe8-a5io8t?file=src/assets/json-schema/date.json) using `mydate6` in the model. – ctaleck Feb 10 '21 at 21:14
  • @ChristopherTaleck Have you found any solution for this ? – Sanoop Surendran Jun 18 '21 at 11:45
  • No. As suggested in my previous comment, I found using the HTML5 `input` with a `type='date'` produces the desired result, so that is what I'm using. – ctaleck Jun 19 '21 at 17:35

2 Answers2

2

So , I think I have solution for you to display mat datepicker as ("yyyy-MM-dd") format. To do that Install to dependencies "@angular/material-moment-adapter": "^11.1.2" and "moment": "^2.18.1" (both are current version). Then import in your formly-datepicker-type.component.ts file these 2 libraries.

import {MomentDateAdapter} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';

Then add a date format like below in your formly-datepicker-type.component.ts file.=>

export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'YYYY-MM-DD',
    monthYearLabel: 'YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'YYYY',
  },
};

After that Update @Component by adding providers like below =>

@Component({
  selector: "app-formly-datepicker-type",
  templateUrl: "./formly-datepicker-type.component.html",
  styleUrls: ["./formly-datepicker-type.component.css"],
   providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},

    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ]
})

Finally, Date time will show as wanted.
Note: I have updated you sample code of stackblitz. Please check my demo link =>Stackblitz mat-datepicker Date-Time Format.

Srijon Chakraborty
  • 2,007
  • 2
  • 7
  • 20
  • 1
    Thank you for your answer, but I am not having trouble formatting the display of the date picker as said in the question title ("not _display_ format"). I am having trouble formatting the actual value returned in the model _after_ clicking the submit button. Your answer still returns `{"mydate":"1940-03-11T07:00:00.000Z"}` Rather, it should return `{"mydate":"1940-03-11"}` – ctaleck Feb 07 '21 at 21:13
  • demo link not working can you please update? what I want is i will provide string as input and need ouput in string only. like '04/08/2022' is it possible in formly ? – murli2308 Aug 04 '22 at 14:48
0

To adapt the format of the date stored in the model that comes from the datepicker, we can use parsers:

Array of functions to execute, as a pipeline, whenever the model updates, usually via user input.

Example:

// Converts the date value to 'YYYY-MM-DD' string
dateParser(value: any) {
    if (value instanceof Date) {
        return value.toISOString().split('T')[0];
    }
    return value;
}

// Formly field with the dateParser
fields: FormlyFieldConfig[] = [{
    key: 'date',
    type: 'datepicker',
    parsers: [this.dateParser]
}];
Zini
  • 53
  • 7