CODEWITHSUNDEEP
angulardatepickerangular-material
Kévin
Kévin

Reputation: 557

Modify dateformat angular datepicker

I can't figure out how to change the date format to this DD/MM/YYYYY format and how to retrieve YYYYY-MM-DD to which I would add this without the 'T00:00:00Z' tildes.

Currently I have this type of format display side: 7/15/2020 or MM/DD/YYYYYY.

There are several threads that talk about this but none for what I want or something recent. I'm on Angular 10 with an Angular Material template.

historisation.component.html

<mat-form-field appearance="fill" >
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate placeholder="Start date">
    <input matEndDate placeholder="End date">
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>
</mat-card-content>

historisation.component.ts I tried this without success

import { Component, OnInit, Injectable, ViewChild, ChangeDetectorRef  } from '@angular/core';
import { RestApiService } from '../../shared/rest-api.service';
import { NotificationsService } from '../../shared/notifications.service';
import { FormControl } from '@angular/forms';
import { Observable, of, Subscription } from 'rxjs';
import { tap, startWith, debounceTime, switchMap, map, filter, distinctUntilChanged } from 'rxjs/operators';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
import {MomentDateAdapter} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';



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

@Injectable({
  providedIn: 'root'
})
  
@Component({
  selector: 'app-historisation-deploiements',
  templateUrl: './historisation-deploiements.component.html',
  styleUrls: ['./historisation-deploiements.component.scss'],
  providers: [
    {provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_Format},
]
})

I hope someone have an example for doing what i want. thanks !

Upvotes: 0

Views: 888

Answers (2)

user11110224
user11110224

Reputation:

This answer respond to what you need. Hope it's OK.

On your app.module.ts :

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
registerLocaleData(localeFr);

...
...
{ provide: LOCALE_ID, useValue: 'fr-FR' }

With this, you datepicker is displaying data in FR. Now to convert it to another thing in your component :

import { DatePipe } from '@angular/common';

On your constrcutor : private datePipe: DatePipe


Create a function for testing : 
const SearchStartDate = this.datePipe.transform(this.range.value.start,'yyyy-MM-dd');
const SearchEndDate = this.datePipe.transform(this.range.value.end,'yyyy-MM-dd');
console.log(SearchStartDate);
console.log(SearchEndDate);

On app.module side :

import { DatePipe } from '@angular/common';
Add Provider : DatePipe

Html Side updated like this :

<mat-date-range-input [rangePicker]="picker" [formGroup]="range">
    <input matStartDate placeholder="Start date" formControlName="start">
    <input matEndDate placeholder="End date" formControlName="end">
  </mat-date-range-input>
  
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>

Upvotes: 1

Boris Yakubchik
Boris Yakubchik

Reputation: 4453

Consider using the Angular DatePipe which you can customize to show whatever format you'd like.

Upvotes: 0

Related Questions