javascript - Angular 5 Date Validation (accepted min and max) - Stack Overflow

admin管理员组

文章数量:1391943

I cant seem to find a simple solution to this but I have a date input like so..

<input [(ngModel)]="toolDate" type="text" class="tool_input tool_input__date">

now Im using .js/ to control the input so you cant write anything but a date so In my appponent.ts

export class ...
   toolDate = moment().format('DD/MM/YYYY');

ngOnInit() {
    const cleave = new Cleave('.tool_input__date', {
      date: true,
      datePattern: ['d', 'm', 'Y']
    });
}

so I don't need date format validation but I do need min and max date validation.. so a user cant type in less than say 01/01/2017 and cant enter a date past the current date

now I know that by default you can use date and set a min and max but I don't want to use the default html date picker

Any help would be appreciated!

Thanks

I cant seem to find a simple solution to this but I have a date input like so..

<input [(ngModel)]="toolDate" type="text" class="tool_input tool_input__date">

now Im using https://nosir.github.io/cleave.js/ to control the input so you cant write anything but a date so In my app.ponent.ts

export class ...
   toolDate = moment().format('DD/MM/YYYY');

ngOnInit() {
    const cleave = new Cleave('.tool_input__date', {
      date: true,
      datePattern: ['d', 'm', 'Y']
    });
}

so I don't need date format validation but I do need min and max date validation.. so a user cant type in less than say 01/01/2017 and cant enter a date past the current date

now I know that by default you can use date and set a min and max but I don't want to use the default html date picker

Any help would be appreciated!

Thanks

• javascript
• angular
• momentjs

Share Improve this question Follow asked Aug 3, 2018 at 2:27 Smokey DawsonSmokey Dawson 9,2402323 gold badges8585 silver badges162162 bronze badges 1

• You can use angular material date picker. – Mohit Saxena Commented Aug 3, 2018 at 7:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

Use as following to validate the date by using custom function.

HTML

<input type="date" class="form-control" formControlName="myDate">

Component : validation while buiding form group

this.myFormGroup = this.formBuilder.group({
    'myDate': new FormControl('myDateVal', [Validators.required, isValidDate]),
});

Utility Method to validate date.

export const isValidDate = (c: FormControl) => {
  const DATE_REGEXP = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
  return DATE_REGEXP.test(c.value) || c.value === '' ? null : {
    validateDate: {
      valid: false
    }
  };
}

本文标签： javascriptAngular 5 Date Validation (accepted min and max)Stack Overflow