Angular MyDatePicker StartDate EndDate Validations



This post will explain you how to implement startdate and enddate validations in "MyDatePicker" plugin

We have so many datepicker plugins available in angular , depending upon the requirement and need, you need to choose the specific package.  
In this post we will talk about "MyDatePicker" it is very simple and easy to use.

The "MyDatePicker"  package has so many built in options available so we can customize the datepicker as per our requirement.

some of the options are..

dateFormat,
disableSince,
.........

you can find complete list of options here...

Steps for Startdate and EndDate validations

1) Add MyDatePickerModule in 'app.module.ts'

import { MyDatePickerModule } from 'mydatepicker';

 @NgModule({
    imports:      [ BrowserModule, MyDatePickerModule ],
    declarations: [ ... ],
    bootstrap:    [ ... ]
 })
 export class AppModule { }}

 2) Add 'IMyDpOptions' in 'app.component.ts'

import { IMyDpOptions} from 'mydatepicker';

write the following code in app.compnent.ts

    public startDate: any = {  };
    public endDate: any = {  };
	

	 public startDateOptions: IMyDpOptions = {
        dateFormat: 'mm-dd-yyyy'
     };

     public endDateOptions: IMyDpOptions = {
      dateFormat: 'mm-dd-yyyy',
     };

	
	onDateChanged(event) {
     if (event.jsdate) {
       var startDate = new Date(event['formatted']);
       startDate.setDate(startDate.getDate() + 1);
       var dateIncrement = 
       { year: startDate.getFullYear(), month: startDate.getMonth() + 1, day: startDate.getDate() }
        this.endDateOptions = {
        dateFormat: 'mm-dd-yyyy',
        disableUntil: event.date
       };
      this.endDate = { date: dateIncrement };
     }
  }

 3) Add following code in "app.component.html"

<form>
  <my-date-picker (dateChanged)="onDateChanged($event)" name="startDate" [options]="startDateOptions" 
                  [(ngModel)]="startDate" required></my-date-picker>
  <my-date-picker name="endDate" [options]="endDateOptions" 
   [(ngModel)]="endDate" required></my-date-picker>
</form>

 

Labels: mydatepicker startdate enddate validations
Subscribe

Receive Quality Tutorials Straight in your Inbox by submitting your Email below:

Delivered by FeedBurner

Protected by Copyscape Duplicate Content Checker