Igniteui-angular: igx-date-picker - change placeHolder from 'M/d/yyyy' to 'MM/DD/YYYY'

[RameshRavichandran]

Question

I have an issue with "igx-date-picker" and I'm not sure if I'm doing it right.

• igniteui-angular version: "^8.0.2"
• browser: Chrome Version 76.0.3809.100 (Official Build) (64-bit)

[mpavlinov]

@RameshRavichandran We use Angular DatePipe for date formatting and "YYYY" and "DD" are not valid placeholders. You should use the placeholders that are described in the Angular DatePipe docs. In your case the resulting format string should be MM/dd/yyyy.

[RameshRavichandran]

@mpavlinov Thanks for the suggestion.

I tried it on following sample project.
https://stackblitz.com/angular/maxbemdvdpk

HTML code :

On selecting a date date-picker input field shows value as '08/29/2019'.
But, When I click outside, date value formatted into '8/29/19'

If mask set to 'MM/dd/yyyy', but expected values are not retained in same format ?
Mainly, I need to set a placeholder instead mask property, Is there valid reason for not exposing placeholder property ?
Please advise.

[zdrawku]

@RameshRavichandran if you want to persist the same format you should use mask and format inputs

mask - Returns the date mask of the IgxDatePickerComponent when in editable dropdown mode.
format - Returns the date display format of the IgxDatePickerComponent in dropdown mode.

Example:

<igx-date-picker mode="dropdown" #picker [(ngModel)]="date" 
    [mask]="'MM/dd/yyyy'" [format]="'MM/dd/yyyy'">

[RameshRavichandran]

@zdrawku

Thanks for suggestion.
It's works fine for me.

Mainly, I need to set a placeholder instead mask property, Is there valid reason for not exposing placeholder property ?
I am just curious about this. Please advise.

[zdrawku]

This was a component design decision. Keep in mind that our datePicker component is highly customizable, and if you want to somehow manage all the elements from the input, you can create a custom template with igx-input-group and change all the elements from there, and also use the placeholder attribute:

<input #dropDownTarget class="igx-date-picker__input-date" igxInput [value]="displayData"
                        (blur)="changeDate($event)" placeholder="------" />

Example - https://stackblitz.com/edit/angular-custom-igx-mask-example