calendar date validation when the user type manually

[ujtordai]

Hi All,

How can I validate date with pattern if the user type it manually?
My problem is, the typed date for example 11/24/2017 is always invalid.

The date value is: "Fri Nov 24 2017 00:00:00 GMT+0100 (Central Europe Standard Time)"

I using the following way:

<p-calendar id="dateOfDOB" [(ngModel)]="DOB" [showIcon]="true" [monthNavigator]="true" [yearNavigator]="true" yearRange="1900:2200"
class="col-xs-12" [showOnFocus]="false" name="dateOfService" mask="99/99/9999" placeholder="mm/dd/yyyy"
slotChar="mm/dd/yyyy" (ngModelChange)="onNgModelChangeDOB($event)" required="true"
pattern="^((0?[1-9]|1[012])[- /.](0?[1-9]|[12][0-9]|3[01])[- /.](19|20)?[0-9]{2})*$"
#dateOfDOB="ngModel">
</p-calendar>
<div *ngIf="dateOfDOB && dateOfDOB.dirty && !dateOfDOB.valid" class="help-block">
<small *ngIf="dateOfDOB && dateOfDOB.hasError('required')">Date of DOB is required.</small>
<small *ngIf="dateOfDOB && dateOfDOB.hasError('pattern')">Date of DOB is invalid.</small>
</div>

If I using dateFormat="mm/dd/yyyy" it duplicate the year in the field when I typed 11/24/2017 in this case the content of the field changed to 11/24/20172017. (why?)

What do you think about it, What I missed? What is the cause of this behavior?

Thank you in advance.

[chandrika murugan]

Hi,

try dateFormat="dd/MM/yy". It will work