Post
Ask Question

ngx-mydatepicker In Angular

Step 1

First, we have to install npm commands in our project.

 npm install ngx-mydatepicker --save.commands
 
the above command is for adding external dependency.
 

Step 2

Add app.module.ts page with the below code for importing the refernce.

  1. import { NgxMyDatePickerModule } from 'NgxMyDatePickerModule ';  
  2.   
  3. @NgModule({  
  4. imports: [ NgxMyDatePickerModule.forRoot() ],  
  5. })  

Step 3

Add your source component.ts page inside call IMyDateModel setting, The default date selection. Sunday has been marked in red color. The current date have to be marked on the calendar.

  1. import {  
  2.     INgxMyDpOptions,  
  3.     IMyDateModel  
  4. } from 'ngx-mydatepicker';  
  5. date = new Date();  
  6. // IMyDateModel Setting:  
  7. myOptions: INgxMyDpOptions = {  
  8.     dateFormat: 'dd.mm.yyyy',  
  9.     sunHighlight: true,  
  10.     markCurrentDay = true;  
  11. };  
  12. // Set current date Default:  
  13. ngxdatepicker: any = {  
  14.     jsdate: new Date()  
  15. };  
  16. // Set Any other date Default:  
  17. ngxdatepicker: any = {  
  18.     date: {  
  19.         year: 2018,  
  20.         month: 3,  
  21.         day: 17  
  22.     }  
  23. };  
  24. // Set Any other date Default:  
  25. onDateChanged(event: IMyDateModel): void {  
  26. console.log(event.formatted);  
  27. });  

Step 4

Add the source component.html page added ngx-mydatepicker HTML code.

  1. <div class="input-group"> <input class="form-control" style="float:none" placeholder="Select a date" ngx-mydatepicker name="mydate" [(ngModel)]="ngxdatepicker" [options]="myOptions" #dp="ngx-mydatepicker" (dateChanged)="onDateChanged($event)" /> <span class="input-group-btn">  
  2. <button type="button" class="btn btn-default">  
  3. <i class="glyphicon glyphicon-calendar"></i>  
  4. </button>  
  5. </span> </div>  

 

 

 I hope this blog mostly helpful for youe ngx-mydatepicker in Angular project.