DatePicker In Angular

In this article you will learn in detail about Datepicker:
  • How to use / incorporate / integrate a Datepicker ?
  • Set custom date format of Datepicker.
  • Get date value from Datepicker
  • Change date format.
In this we are going to use only four(4) files.
  • app.component.html
  • app.component.ts
  • angular-cli.json
  • app.module.ts
Files and Uses
 
SR.
No. 
 FILE NAME  DESCRIPTION
 1   app.component.html  To write html code (UI coding).
 2  app.component.ts  To change the title.
 3  angular-cli.json  To update CSS (style sheet).
 4  app.module.ts  To configure BsDatePickerModule
 
Create project called AngularDatePicker 
 
Command: ng new AngularDatePicker
 
Datepicker In Angular
 
Project created successfully:
 
Datepicker In Angular
 
Angular current version detail,
 
Command: ng -v
 
Datepicker In Angular
 
Execute empty project,
 
Command: ng serve -o
 
Datepicker In Angular
 
Now you can check your default browser,
 
Datepicker In Angular
 
Default OUTPUT
 
Datepicker In Angular
 
Now we open ANGULARDATEPICKER project inside VS Code.
 
Datepicker In Angular
 
Select OpenFolder option to open the folder files in VISUAL STUDIO CODE.
 
Datepicker In Angular
 
Expand folder SRC and double click on app.component.ts file.
 
Now we change the title of App.Component to “Implement Datepicker in Angular”
 
Your app.component.ts file should look like this,
  1. import { Component } from '@angular/core';    
  2.     
  3. @Component({    
  4.    selector: 'app-root',    
  5.    templateUrl: './app.component.html',    
  6.    styleUrls: ['./app.component.css']    
  7.    })    
  8. export class AppComponent {    
  9.    title = 'Implement Datepicker in Angular';    
  10. }    
Now switch to app.component.html file where we write html code.
 
First remove default code of app.component.html
 
As you can see the below screenshot title has been changed successfully. 
  1. <div style="text-align:center">  
  2.     <h1>    
  3. Welcome to {{ title }}!    
  4. </h1>  
  5. </div>  
  6. <h2>Member Profile </h2>  
  7. <table>  
  8.     <tr>  
  9.         <td>    
  10. Friend Name    
  11. </td>  
  12.         <td>  
  13.             <input id="txtFriendName" name="FriendName" placeholder="Enter Your Fullname"/>  
  14.         </td>  
  15.     </tr>  
  16.     <tr>  
  17.         <td>    
  18. Phone Number    
  19. </td>  
  20.         <td>  
  21.             <input id="txtPhoneNumber" name="PhoneNumber" placeholder="Enter Your Landline/Mobile Number"/>  
  22.         </td>  
  23.     </tr>  
  24.     <tr>  
  25.         <td>    
  26. Email ID    
  27. </td>  
  28.         <td>  
  29.             <input id="txtEmailID" name="EmailID" placeholder="Enter Your Email ID"/>  
  30.         </td>  
  31.     </tr>  
  32.     <tr>  
  33.         <td>    
  34. Country    
  35. </td>  
  36.         <td>  
  37.             <input id="txtCountry" name="Country" placeholder="Enter Your Country"/>  
  38.         </td>  
  39.     </tr>  
  40.     <tr>  
  41.         <td>    
  42. Date of Birth    
  43. </td>  
  44.         <td>  
  45.             <input id="txtDOB" name="DOB" class="form-control"    
  46. placeholder="Enter Your Date of Birth" type="text"/>  
  47.         </td>  
  48.     </tr>  
  49.     <tr>  
  50.         <td>    
  51. Marital Satus    
  52. </td>  
  53.         <td>    
  54. Yes   
  55.             <input id="rbYes" type="radio" name="IsMarried" value="1" checked/>    
  56. No   
  57.             <input id="rbNo" type="radio" name="IsMarried" value="0"/>  
  58.         </td>  
  59.     </tr>  
  60.     <tr>  
  61.         <td>    
  62. Yearly Salary (Per Annum)    
  63. </td>  
  64.         <td>  
  65.             <input id="txtSalaryPerAnnum" name="SalaryPerAnnum" placeholder="Enter Your Date of Birth"/>  
  66.         </td>  
  67.     </tr>  
  68.     <tr>  
  69.         <td colspan="2">  
  70.             <button (click)="clickMethod()" >Submit</button>  
  71.         </td>  
  72.     </tr>  
  73.     <tr>  
  74. </table>    
OUTPUT
 
Execute the project by ng serve -o
 
Datepicker In Angular
 
Now we going toward implementing Datepicker using ngx-bootstrap.
 

How to get Datepicker?

 
For Datepicker we have to do the following steps:
 
Datepicker In Angular
  1. npm install ngx-bootstrap -save   
You have to execute another command,
 
Datepicker In Angular 
  1. npm install ngx-bootstrap@2.0.5 --save  
Click on package.json file to confirm installation of packages.
 
Datepicker In Angular
 
Set the css file
 
Open .angular-cli.json file to set following settings.
  1. "styles": [  
  2. "../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",  
  3. "styles.css"  
  4. ],  
Import Statement
 
Open app.module.ts file to set following settings. 
  1. import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';  
In @NgModule section do following settings,
  1. imports: [    
  2.    BsDatepickerModule.forRoot(),    
  3.    BrowserModule    
  4. ],   
HTML File Settings
 
Base Code,
  1. <input id="txtDOB" name="DOB" class="form-control" placeholder="Enter Your Date of Birth" type="text"/>    
Change to,
  1. <input id="txtDOB" name="DOB" class="form-control"  placeholder="Enter Your Date of Birth" type="text" bsDatepicker/>    
OUTPUT
 
Execute the project by ng serve -o 
 
Datepicker In Angular
 
The next task is to change date format.
 
DATE FORMAT
 
Upate INPUT tag of DOB 
  1. <input id="txtDOB" name="DOB" class="form-control"    
  2. placeholder="Enter Your Date of Birth" type="text" bsDatepicker [(bsValue)]="DOB" value="{{DOB | date :'dd-MMM-yyyy'}}"/>     
In the above code we had added,
  1. [(bsValue)]="DOB" value="{{DOB | date :'dd-MMM-yyyy'}}"   
OUTPUT
 
Execute project with the execute command: 
  1. ng serve -o  
Datepicker In Angular
 
Full Code
 
app.component.html Code
  1. <div style="text-align:center">  
  2.     <h1>    
  3. Welcome to {{ title }}!    
  4. </h1>  
  5. </div>  
  6. <h2>Member Profile </h2>  
  7. <table>  
  8.     <tr>  
  9.         <td>    
  10. Friend Name    
  11. </td>  
  12.         <td>  
  13.             <input id="txtFriendName" name="FriendName" placeholder="Enter Your Fullname"/>  
  14.         </td>  
  15.     </tr>  
  16.     <tr>  
  17.         <td>    
  18. Phone Number    
  19. </td>  
  20.         <td>  
  21.             <input id="txtPhoneNumber" name="PhoneNumber" placeholder="Enter Your Landline/Mobile Number"/>  
  22.         </td>  
  23.     </tr>  
  24.     <tr>  
  25.         <td>    
  26. Email ID    
  27. </td>  
  28.         <td>  
  29.             <input id="txtEmailID" name="EmailID" placeholder="Enter Your Email ID"/>  
  30.         </td>  
  31.     </tr>  
  32.     <tr>  
  33.         <td>    
  34. Country    
  35. </td>  
  36.         <td>  
  37.             <input id="txtCountry" name="Country" placeholder="Enter Your Country"/>  
  38.         </td>  
  39.     </tr>  
  40.     <tr>  
  41.         <td>    
  42. Date of Birth    
  43. </td>  
  44.         <td>  
  45.             <input id="txtDOB" name="DOB" class="form-control"    
  46. placeholder="Enter Your Date of Birth" type="text" bsDatepicker [(bsValue)]="DOB" value="{{DOB | date :'dd-MMM-yyyy'}}"/>  
  47.         </td>  
  48.     </tr>  
  49.     <tr>  
  50.         <td>    
  51. Marital Satus    
  52. </td>  
  53.         <td>    
  54. Yes   
  55.             <input id="rbYes" type="radio" name="IsMarried" value="1" checked/>    
  56. No   
  57.             <input id="rbNo" type="radio" name="IsMarried" value="0"/>  
  58.         </td>  
  59.     </tr>  
  60.     <tr>  
  61.         <td>    
  62. Yearly Salary (Per Annum)    
  63. </td>  
  64.         <td>  
  65.             <input id="txtSalaryPerAnnum" name="SalaryPerAnnum" placeholder="Enter Your Date of Birth"/>  
  66.         </td>  
  67.     </tr>  
  68.     <tr>  
  69.         <td colspan="2">  
  70.             <button (click)="clickMethod()" >Submit</button>  
  71.         </td>  
  72.     </tr>  
  73. </table>   
app.module.ts Code
  1. import { BrowserModule } from '@angular/platform-browser';    
  2. import { NgModule } from '@angular/core';    
  3. import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';    
  4. import { AppComponent } from './app.component';    
  5.     
  6. @NgModule({    
  7.    declarations: [    
  8.    AppComponent    
  9. ],    
  10. imports: [    
  11.    BsDatepickerModule.forRoot(),    
  12.    BrowserModule    
  13. ],    
  14. providers: [],    
  15.    bootstrap: [AppComponent]    
  16.    })    
  17. export class AppModule { }    
app.component.ts Code
  1. import { Component } from '@angular/core';    
  2.     
  3. @Component({    
  4.    selector: 'app-root',    
  5.    templateUrl: './app.component.html',    
  6.    styleUrls: ['./app.component.css']    
  7. })    
  8. export class AppComponent {    
  9.    title = 'Implement Datepicker in Angular';    
  10. }    
Happy Coding. . .