PHP-Fusion Powered Website

Angular Bootstrap Datepicker

Introduction to Angular Bootstrap Datepicker

The bootstrap has many advanced components and classes to make application user friendly. The angular make reduces the size of code in a one-page format to make web application lightweight. The combination of angular and bootstrap for date picker is useful and easy for users and developers. The angular bootstrap datepicker is an advanced feature for picking the date in web applications. It is choosing the date, month, and year as per user’s requirements. We can able to pick the date range from start to end dates. It allows choosing the local language in datepicker and change the color of the calendar. It is supported by the manual trigger of datepicker and position of datepicker.

Syntax

The angular bootstrap datepicker used angular and bootstrap technology.

The basic angular bootstrap datepicker syntax is below.

Bootstrap syntax is below:

<div class= "container">
Date: <input type="text"  placeholder="Datepicker"
class="form-control" bsDatepicker><br>
</div>

Component.ts syntax is below:

import {Component} from '@angular/core';
@Component({
selector : ' basic-demo-datepicker ',
templateUrl : ' ./datepickerdeo.html '
})
export class BasicDemoDatepickerComponent {
title = 'datepickerApp';
}

How does Bootstrap Datepicker works?

Given below is the working:

Step 1: Two methods to install bootstrap in angular

Given below are the two methods to install bootstrap in angular:

Method 1: This method is using NPM.

The ngx-bootstrap installs through the npm.

Code:

npm install ngx-bootstrap  --save

The bootstrap CSS stylesheet adds to the HTML page. We can use bootstrap3 or bootstrap4 stylesheet.

<link href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
rel="stylesheet">

Method 2: This method is using Angular CLI.

The ngx-bootstrap dependencies add using Angular CLI.

ng addngx-bootstrap

The ngx-bootstrap component dependencies add using Angular CLI.

ng addngx-bootstrap --component component_name

The angular bootstrap datepicker component is below.

ng addngx-bootstrap --component datepicker

Step 2: Two methods to install CSS in angular

Given below are the two methods to install CSS in angular:

Method 1: The CDN bootstrap datepicker file load in HTML file.

<link rel="stylesheet" href="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css">

Method 2: Load the file in the angular node_module folder like angular CLI.

node_modules/ngx-bootstrap/datepicker/bs-datepicker.css

Step 3: The filename.html code

Code:

<div class = "container">
Date: <input type="text"  placeholder="Datepicker"
class="form-control" bsDatepicker><br>
</div>

Step 4: There component file code

Code:

import {Component} from ' @angular/core ';
@Component({
selector : ' basic-demo-datepicker ',
templateUrl : ' ./filename.html '
})
export class BasicDemoDatepickerComponent {
title = 'datepickerApp';
}

Examples

Given below are the examples mentioned:

Example #1

Html file (filename.html)

Code:

<!doctypehtml>
<html>
<head>
<meta charset ="utf-8">
<title> Angular Bootstrap Datepicker tutorial </title>
<base href="/">
<meta name ="viewport" content ="width=device-width, initial-scale=1">
<link rel ="icon" type ="image/x-icon" href ="favicon.ico">
<link rel ="stylesheet" href ="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css">
<link href = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css rel ="stylesheet">
</head>
<body>
<div class ="container">
<div class ="form-group">
<input type ="text" placeholder ="DatePicker" class = "form-control" bsDatepicker>
</div>
</div>
</body>
</html>

Component file (app.component.ts)

Code:

import {Component} from ' @angular/core ';
@Component({
selector : ' basic-demo-datepicker ',
templateUrl : ' ./filename.html '
})
export class BasicDemoDatepickerComponent {
title = 'datepickerApp';
}

Output:

Angular Bootstrap Datepicker 1

Example #2

The Basic Angular Bootstrap Daterangepicker example and output are below.

Html file (filename.html)

Code:

<!doctypehtml>
<html>
<head>
<meta charset ="utf-8">
<title> Angular Bootstrap Datepicker tutorial </title>
<base href="/">
<meta name ="viewport" content ="width=device-width, initial-scale=1">
<link rel ="icon" type ="image/x-icon" href ="favicon.ico">
<link rel ="stylesheet" href ="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css">
<link href = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css rel ="stylesheet">
</head>
<body>
<div class ="container">
<div class ="form-group">
<input type ="text" placeholder ="DatePicker" class = "form-control"bsDaterangepicker>
</div>
</div>
</body>
</html>

Component file (app.component.ts)

Code:

import {Component} from ' @angular/core ';
@Component({
selector : ' basic-demo-datepicker ',
templateUrl : ' ./filename.html '
})
export class BasicDemoDatepickerComponent {
title = 'datepickerApp';
}

Output:

Angular Bootstrap Datepicker 2

Example #3

Used bsInlineValue property for set calendar default.

Html file (filename. html)

Code:

<!doctype html>
<html>
<head>
<meta charset ="utf-8">
<title> Angular Bootstrap Datepicker tutorial </title>
<base href="/">
<meta name ="viewport" content ="width=device-width, initial-scale=1">
<link rel ="icon" type ="image/x-icon" href ="favicon.ico">
<link rel ="stylesheet" href ="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css">
<link href = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css rel ="stylesheet">
</head>
<body>
<div class ="container">
<bs-datepicker-inline [bsValue]="bsInlineValue">
</bs-datepicker-inline>
</div>
</body>
</html>

Component file (app.component.ts)

Code:

import {Component} from ' @angular/core ';
@Component({
selector : ' inline-demo-datepicker ',
templateUrl : ' ./filename.component.html '
})
export class InlineDemoDatepickerComponent {
title = 'datepickerApp';
bsInlineValue = new Date();
bsInlineRangeValue: Date[];
maxDate = new Date();
constructor() {
this.maxDate.setDate(this.maxDate.getDate() + 7);
this.bsInlineRangeValue = [this.bsInlineValue, this.maxDate];
}
}

Output:

used bsInlineValue property

Example #4

The date format set by angular bootstrap datepicker.

Html file (filename. html)

Code:

<!doctypehtml>
<html>
<head>
<meta charset ="utf-8">
<title> Angular Bootstrap Datepicker tutorial </title>
<base href="/">
<meta name ="viewport" content ="width=device-width, initial-scale=1">
<link rel ="icon" type ="image/x-icon" href ="favicon.ico">
<link rel ="stylesheet" href ="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css">
<link href = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css rel ="stylesheet">
</head>
<body>
<div class ="container">
<form [formGroup]="form">
<div class="row">
<div class=" form-group"&gt
<input
Class="form-control"
#datepickerYMD="bsDatepicker"
bsDatepicker
formControlName="dateYMD"
[bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }">
</div>
<div class=" form-group">
<button class="btnbtn-success" (click)="datepickerYMD.toggle()" [attr.aria-expanded]="datepickerYMD.isOpen" type="button">Date Picker</button>
</div>
</div>
<br>
<div class="row">
<div class=" form-group">
<input
Class="form-control"
#datepickerMDY="bsDatepicker"
bsDatepicker
formControlName="dateMDY"
[bsConfig]="{ dateInputFormat: 'MM/DD/YYYY' }">
</div>
<div class=" form-group">
<button class="btnbtn-success"
(click)="datepickerFull.toggle()" [attr.aria-expanded]="datepickerFull.isOpen" type="button">Date Picker</button>
</div>
</div>
</form>
</div>
</body>
</html>

Component file (app.component.ts)

Code:

import {Component} from ' @angular/core ';
import { FormControl, FormGroup } from '@angular/forms';
@Component({
selector : ' format-demo-datepicker ',
templateUrl : ' ./filename.html '
})
export class FormatDemoDatepickerComponent {
title = 'datepickerApp';
currentDate = new Date();
form = new FormGroup({
dateYMD: new FormControl(new Date()),
dateFull: new FormControl(new Date()),
dateMDY: new FormControl(new Date()),
dateRange: new FormControl([
new Date(),
new Date(this.currentDate.setDate(this.currentDate.getDate() + 7))
])
});}

Output:

Angular Bootstrap Datepicker 4

Angular Bootstrap Datepicker 5

Example #5

The local language select for displaying the date picker using angular and bootstrap.

Html file (filename.html)

Code:

<!doctypehtml>
<html>
<head>
<meta charset ="utf-8">
<title> Angular Bootstrap Datepicker tutorial </title>
<base href="/">
<meta name ="viewport" content ="width=device-width, initial-scale=1">
<link rel ="icon" type ="image/x-icon" href ="favicon.ico">
<link rel ="stylesheet" href ="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css">
<link href = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css rel ="stylesheet">
</head>
<body>
<div class ="container">
<div class ="form-group">
<select
Class = "custom-select form-control "
[(ngModel)] = "locale" (ngModelChange) = "applyLocale(dp);">
<option *ngFor = "let loc of locales" [value] = "loc">      {{ loc }} </option>
</select>
</div>
<div class= " form-group">
<input placeholder= "Datepicker" type= "text" class= "form-control" bsDatepicker #dp= "bsDatepicker">
</div>
<div class= " form-group">
<button class= "btnbtn-success" (click)= "dp.show()" [attr.aria-expanded]= "dp.isOpen" type= "button">
Date Picker </button>
</div>
</div>
</div>
</body>
</html>

Component file (app.component.ts)

Code:

import {Component} from ' @angular/core ';
import { BsLocaleService } from 'ngx-bootstrap/datepicker';
import { listLocales } from 'ngx-bootstrap/chronos';
@Component({
selector : ' basic-demo-datepicker ',
templateUrl : ' ./filename.html '
})
export class BasicDemoDatepickerComponent {
title = 'datepickerApp';
locale = 'hi';
locales = listLocales();
constructor(private localeService: BsLocaleService) {}
applyLocale(pop: any) {
this.localeService.use(this.locale);
pop.hide();
pop.show();
}
}

Output:

local language select

Conclusion

The angular bootstrap datepicker reduces coding size and makes it easy for the coder. It is light weighed due to a one-page script application. It is advance, user friendly, and attractive web application component.