Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

Input date in Angular Material date picker in dd/MM/yyyyy format

+2
−0

I am trying to create an application that takes a date as user input which is then passed as a parameter to an API call. The local date format is dd/MM/yyyy. I want the user to be able to enter the date via the input OR the mat-datepicker in the local format.

Standard syntax for reactive forms with material (mat-datepicker, matInput) etc looks like:

Template:

<mat-form-field>
  <mat-label>Date of Birth:</mat-label>
  <input matInput [matDatepicker]="dobPicker" formControlName="dobCtrl"
(click)="dobPicker.open()"/>
  <mat-datepicker-toggle matSuffix [for]="dobPicker">
    <mat-icon matDatepickerToggleIcon>calendar_month</mat-icon>
  </mat-datepicker-toggle>
  <mat-datepicker #dobPicker startView="multi-year">
  </mat-datepicker>
</mat-form-field>`

Component constructor:

this.Form = new FormGroup({
      agreeCtrl: new FormControl(''),
      dobCtrl: new FormControl('')
    });

It makes no difference if I insert {{ dob | date }} between the mat-datepicker tags

My angular.json has the following:

"projects": {
    "project-name": {
      "projectType": "application",
      "i18n": {
        "sourceLocale": "en-AU"
      },

Currently, the user cannot type a date into the input box in dd/MM/yyyy format. It works if the user inputs a date in US (MM/dd/yyyy) format, but shows as invalid as soon as a number greater than 12 is input to the text box. If a date is selected via the datepicker it displays in the correct (dd/MM/yyyy) format and shows as valid, but if the user then changes (eg) the month, the date in the input becomes invalid.

I went down a bit of a rabbit hole with something called moment.js as it appeared to be a well-known solution, however moment has been deprecated (with the blessing of the moment devs), with date-fns listed as its replacements, so I don't want a moment solution.

What do I have to change to allow dd/MM/yyyy input via both the input and/or the mat-datepicker?

Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

0 comment threads

1 answer

+1
−0

You should just be able to alter the MAT_DATE_LOCALE provider by adding something like { provide: MAT_DATE_LOCALE, useValue: 'en-AU' } to your module's providers array.

Angular Material's docs are pretty neat; take a look at this section regarding datepicker i18n.

Why does this post require moderator attention?
You might want to add some details to your flag.

1 comment thread

Example (1 comment)

Sign up to answer this question »