Angular 2 Bootstrap DatePicker Tutorial

To develop rich UI Angular 2 applications, the Angular 2 bootstrap component project comes in handy. This project is a collection of bootstrap components containing the following elements

• Accordion
• Modals
• Carousel
• DatePicker
• Rating
• Tabs
• And many more…

You can read more about ng2-bootstrap over here.

This article on Angular 2 DatePicker demos how to use the DatePicker UI element from the Angular 2 bootstrap project. The Angular project is created using Systemjs.config.js approach, but you can also use WebPack. To learn more, you can read about Angular 2 application development using WebPack.

This article is implemented using Visual Studio Code (VS Code). This is a cross-platform, open source free IDE by provided Microsoft. VS Code can be downloaded from bit.ly/dncvscode.

Angular 2 DatePicker application

Step 1: Create a folder on the disk and name it NG2_DatePicker. Open VS Code and navigate to this folder using File > Open Folder… . This folder will become the project workspace for the current application.

Step 2: In this project, add a new folder of the name app. This folder will contain all code files in it.

Step 3: Now add a new file named ‘index.html’. This file will be used to load the Angular 2 template. Right-click on this file and select Open in Command Prompt option to open the command prompt. Run the following command from this command prompt.

Npm init

Running this command will start the wizard to create the package.json file. Once this file is created, add the following dependencies and devDependencies. These dependencies are needed for executing the application. (Note: The project dependencies can be installed using following command Npm install -g )

{
  "name": "ng2-datepicker-application",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.4.3",
    "@angular/compiler": "2.4.3",
    "@angular/core": "2.4.3",
    "@angular/forms": "2.4.3",
    "@angular/http": "2.4.3",
    "@angular/platform-browser": "2.4.3",
    "@angular/platform-browser-dynamic": "2.4.3",
    "@angular/router": "3.4.3",
    "bootstrap": "3.3.7",
    "es6-shim": "0.35.2",
    "reflect-metadata": "0.1.9",
    "rxjs": "5.0.3",
    "systemjs": "0.19.41",
    "zone.js": "0.7.4",
    "http-server": "0.9.0",
    "@types/es6-shim": "0.31.32"
  },
  "devDependencies": {
    "@types/es6-shim": "0.31.32",
    "concurrently": "3.1.0",
    "lite-server": "2.2.2",
    "ng2-bootstrap": "^1.3.3",
    "node-gyp": "3.4.0",
    "typescript": "2.0.3",
    "typings": "1.4.0"
  }
}

Save this file and run the following command:

Npm install

This step will install required packages in the project. In the project, a node_modules folder will be added with the required packages for @angular, ng2-bootstrap, http-server, etc. The project uses http-server to deliver static files to the client. Run the following command from the command prompt:

Typings –init

This step will create tsconfig.json file in the project with the settings for module, target, sourceMap, etc. Modify this file for moduleResolution, for intellisense and decorator metadata as shown in following code:

{
    "compilerOptions": {
        "module": "system",
        "target": "es5",
        "moduleResolution": "node",
        "noImplicitAny": false,
        "sourceMap": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true
    }
}

Step 4: In the project, add a new file of the name systemjs.config.js. This file will contain the package configuration required for the application. Add the following code:

var map = {
    "rxjs": "node_modules/rxjs",
    "@angular/common": "node_modules/@angular/common",
    "@angular/compiler": "node_modules/@angular/compiler",
    "@angular/core": "node_modules/@angular/core",
    "@angular/forms":"node_modules/@angular/forms",
    "@angular/platform-browser": "node_modules/@angular/platform-browser",
    "@angular/platform-browser-dynamic": "node_modules/@angular/platform-browser-dynamic",
    "ng2-bootstrap":"node_modules/ng2-bootstrap",
    "moment":"node_modules/moment"
};

var packages = {
    "rxjs": { "defaultExtension": "js" },
    "@angular/common": { "main": "bundles/common.umd.js", "defaultExtension": "js" },
    "@angular/compiler": { "main": "bundles/compiler.umd.js", "defaultExtension": "js" },
    "@angular/core": { "main": "bundles/core.umd.js", "defaultExtension": "js" },
    "@angular/forms":{"main":"bundles/forms.umd.js","defaultExtension":  "js"},
    "@angular/platform-browser": { "main": "bundles/platform-browser.umd.js", "defaultExtension": "js" },
    "@angular/platform-browser-dynamic": { "main": "bundles/platform-browser-dynamic.umd.js", "defaultExtension": "js" },
    "ng2-bootstrap":{main:"bundles/ng2-bootstrap.umd.js",defaultExtensio:"js",formart:"cjs"},
    "moment":{main:"moment.js",defaultExtensio:"js"},
    "app": {
        format: 'register',
        defaultExtension: 'js'
    }
};

var config = {
    map: map,
    packages: packages
};

System.config(config);

The above file contains package configuration for @angular, ng2-bootstrap.

Step 5: In the app folder, add a new file of the name person.model.ts. This file contains the Person class as shown in the following code:

export class Person{
    constructor(
        public personId:number,
        public personName:string,
        public registrationDate:Date
    ){

    }
}

Step 6: In the app folder, add a new file of the name app.component.ts with the following code:

import { Component, OnInit } from '@angular/core';
import {DatepickerModule} from 'ng2-bootstrap';
import * as moment from 'moment';
import {Person} from './person.model';

@Component({
    selector: 'my-data',
    templateUrl: './app/myapp.html' 
})
export class AppComponent implements OnInit {
    person:Person;
    persons:Array< Person >;
    date:Date;
    minDate:Date;
    disabledDate:{dt:Date,mode:string};
    constructor() { 
      this.date = new Date();
      this.minDate = new Date();
      this.person = new Person(0,'',new Date());
      this.persons = new Array< Person >();     
      this.minDate.setDate(this.date.getDate()-1);
      this.person = new Person(0,'',new Date());
    }

    ngOnInit() { }

    clear(){
            this.person = new Person(0,'',new Date());     
    }
    save(){
        this.persons.push(this.person);
    }
}

The above code contains Angular 2 component of the name AppComponent. The AppComponent defines my-data selector which loads the myapp.html file. The component file imports DatePickerModule from ng2-bootstrap package. The component declares a Person object and Persons array object. The date and minDate objects of Date type are declared for date operations. The clear() and save() functions initialize the Person object and add the Person object to the persons array. The minDate property is set to a one day less than the current date.

Bootstrap DatePicker

Step 7: In the app folder, add a new file of the name myapp.html. Add the following markup in it

<h2>The DatePicker Example</h2>
<hr>
<table class="table table-bordered table-striped">
    <tr>
        <td>
            <table class="table table-bordered table-striped">
                <tr>
                    <td>Person Id:</td>
                    <td>
                        <input type="text" class="form-control" 
                        [(ngModel)]="person.personId"/>
                    </td>
                </tr>
                <tr>
                    <td>Person Name:</td>
                    <td>
                        <input type="text" class="form-control" 
                        [(ngModel)]="person.personName"/>
                    </td>
                </tr>
                <tr>
                    <td>Registration Date:</td>
                    <td>
                        <datepicker
                         [(ngModel)]="person.registrationDate"
                          [showWeeks]="true"
                          [minDate]="minDate"
                          [dateDisabled]="disabledDate"
                          [onlyCurrentMonth]=true
                        ></datepicker>
                       
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="New" 
                        (click)="clear()"/>
                    </td>
                    <td>
                        <input type="button" value="Save" 
                        (click)="save()"/>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <td>Person Id</td>
                    <td>Person Name</td>
                    <td>Registration Date</td>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let p of persons">
                    <td>{{p.personId}}</td>
                    <td>{{p.personName}}</td>
                    <td>{{p.registrationDate|date:'longDate'}}</td>
                </tr>
            </tbody>
        </table>
    </tr>
</table>

The above markup contains <input /> element bound with personId and personName properties of person object. The <datepicker> selector is used to render DatePicker. This has several attributes, some of them are used in the markup as explained here:

showWeeks - This is Boolean property. When set to true, it shows week for the months.

minDate - This property accepts the Date object. This shows the minimum enabled date from the date picker. In the current application, this property is bind with minDate property. This is one less than the current date.

onlyCurrentMonth - This is the Boolean property. When this is set to true, the datepicker will show on the current month for selection.

Step 8: In the app folder, add a new file of the name main.ts. This file will contain bootstrap code for the Angular 2 project as shown in the following code:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component';
import {DatepickerModule} from 'ng2-bootstrap';
@NgModule({
    imports: [BrowserModule, FormsModule, DatepickerModule.forRoot()],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);

This step imports all the required modules for the application to run e.g. DatepickerModule, FormsModule, etc.

Step 9: In the index.html, add the following markup:

<!DOCTYPE html>
<html>
<head>
    <title>Angular 2 DatePicker App</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"></link>
</head>
<body>
    <h1>Angular 2 DatePicker Application</h1>
    <my-data></my-data> 
    <a href="http://node_modules/es6-shim/es6-shim.min.js">http://node_modules/es6-shim/es6-shim.min.js</a>
    <a href="http://node_modules/reflect-metadata/Reflect.js">http://node_modules/reflect-metadata/Reflect.js</a>
    <a href="http://node_modules/systemjs/dist/system.src.js">http://node_modules/systemjs/dist/system.src.js</a>
    <a href="http://node_modules/zone.js/dist/zone.js">http://node_modules/zone.js/dist/zone.js</a>
    <a href="http://systemjs.config.js">http://systemjs.config.js</a>
    
        System.import('./app/main')
            .then(null, console.error.bind(console));
    
</body>
</html>

The index.html uses <my-data> tag which will render the html with UI. The html file loads all scripts required for the application.

To run the application, execute the following command from the command prompt

http-server

This command will start the server on 8080 port as shown in the following image:

Open the browser and enter the following URL in the address bar:

http://localhost:8080/index.html

You should see the following result:

The datepicker shows the current month because its onlyCurrentMonth property is set. The minDate property shows the previous date (in this case 13-feb-2017) enabled.

Download the entire source code for the Angular 2 Datepicker Demo

Conclusion: The Angular 2 bootstrap DatePicker component is a cool UI element for calendar operations based on dates.

This article has been editorially reviewed by Suprotim Agarwal.

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

Author

Mahesh Sabnis is a DotNetCurry author and a Microsoft MVP having over two decades of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions), and Front-end technologies like Angular and React. Follow him on twitter @maheshdotnet or connect with him on LinkedIn