I am dealing with a datepicker that defaults to the MM/dd/yyyy format, and I need it to adjust based on the user's browser language. For example, if the browser language is English India, then the format should be set to dd/MM/yyyy as shown below.
Below is my custom datepipe:
@Pipe({ name: 'replaceDate1' })
export class ReplaceDate1Pipe implements PipeTransform {
transform(value: string): string {
if (!value) {
return value;
}
let date1 = (new Date(value));
var userLang = navigator.language;
console.log(value);
console.log(date1);
console.log(Intl.DateTimeFormat(userLang).format(date1));
return Intl.DateTimeFormat(userLang).format(date1);
}
}
Here is the corresponding HTML code:
<mat-form-field [floatLabel]="never" appearance="fill" id="xxx" class="textbox1" panelClass="option-panel"gt;
<mat-label>Choose a date</mat-label>
<input [min]="todayDate" [disabled]="fun1()" readonly matInput [matDatepicker]="picker" [value]="program.datetobeformatted | replaceDate1" [matDatepickerFilter]="myDateFilter" (dateChange)="onChange($event, 'xxx', program, $index)">
<mat-datepicker-toggle matSuffix [for]="picker"gt;</mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
I am attempting to change the date format displayed in the datepicker, but it appears as an empty field in the UI. https://i.stack.imgur.com/Sbi9X.png
I have checked the values logged when the pipe is called, and they seem correct. So why are they not being reflected in the datepicker?
Also, is there a way to change the datepicker format directly from the HTML file without altering the backend date format used for services?
Below are the log outputs from the replaceDate1 pipe:
2021-06-30T00:00:00Z
Wed Jun 30 2021 05:30:00 GMT+0530 (India Standard Time)
30/6/2021