calendar date validation when the user type manually

UI Components for Angular
Post Reply
Posts: 53
Joined: 31 May 2017, 14:18

24 Nov 2017, 15:44

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})*$"
<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>

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
Posts: 1
Joined: 10 Jul 2019, 09:09

10 Jul 2019, 09:11


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

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests