How to check entered value in input tag is matching with specific date format like "MM/dd/YYYY" in angular

Question

I have to check given value is matching with specific date format like "MM/dd/YYYY"

Ts file

onValChange(event: Date) {
    const datePipe = new DatePipe('en-US');
    const val = datePipe.transform(event, 'MM/dd/yyyy');
    this.writeValue(moment(event));
  }

Html file

<input class="form-control form-control-sm requiredV" [(ngModel)]="dateValue"
     placeholder="mm/dd/yyyy" name="dateField" id="dateField" ngbDatepicker
     #dateFieldngb="ngbDatepicker" [required]="isRequired"
     [ngClass]="{'isUntouched':formName.submitted}" (ngModelChange)="onValChange($event)"
     (keypress)="allow_only_numbers($event)" (click)="dateFieldngb.toggle()" />

Can you please tell me how to check entered value is matching with this specific format or not

score 1 · Accepted Answer · answered Aug 19 '19 at 08:04

1

I usually use an external library to control dates.

https://momentjs.com

This library provides a function valid. You can implement this function like this

moment(date, 'MM/DD/YYYY').isValid()

answered Aug 19 '19 at 08:04

eduardo panero

24
1

Can you please suggest me an idea to do this – Olive Aug 19 '19 at 10:01
Maybe you must limit the length to 10 characters, or use a regular expression to check the string – eduardo panero Aug 19 '19 at 12:52

score 0 · Answer 2 · answered Aug 19 '19 at 07:45

0

You can filter your data using date pipe, please check given reference.

Angular Date Pipe

answered Aug 19 '19 at 07:45

Piyush Jain

1,895
3
19
40

score 0 · Answer 3 · answered Aug 19 '19 at 08:01

You can do this either by using a library or writing a custom function

Library - moment-js

Example:

moment("2010 13",           "YYYY MM").isValid();     // false (not a real month)
moment("2010 11 31",        "YYYY MM DD").isValid();  // false (not a real day)
moment("2010 2 29",         "YYYY MM DD").isValid();  // false (not a leap year)
moment("2010 notamonth 29", "YYYY MMM DD").isValid(); // false (not a real month name)

Referred from this thread.

Custom function using Regular expression

var date_regex = /^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/ ;

if(!(date_regex.test(testDate))){
  return false;
}

Referred from this thread

How to check entered value in input tag is matching with specific date format like "MM/dd/YYYY" in angular

3 Answers3