Ngx Bootstrap DatePicker

Ngx Bootstrap DatePicker

The DatePicker component of ngx-bootstrap is highly configurable and flexible according to our needs. This provides different options for selecting a date or date range.

BsDatepickerDirective

selector

• [bsDatepicker]

Inputs

• bsConfig − Partial, Datepicker Config object
• bsValue − Date, datepicker's initial value
• container − string, A selector that specifies the element that should be appended to the datepicker. Default: body for body
• dateCustomClasses −DatePickerDateCustomClasses[], Date Custom Classes[], Date Custom Classes
• datesDisabled − Date[], Deactivates unique dates
• datesEnabled − Date[], Allow precise dates
• dateTooltipTexts − DatepickerDateTooltipText[], Text Date Tooltip Text[], Date Tooltip Text Text
• daysDisabled − number[], Disabled Several days throughout the week
• disabled Boolean, Shows whether or not the content of the datepicker is allowed
• IsOpen, Boolean, returns whether the date selector is currently seen or not
• Boolean, maxDate, Maximum date required for selection
• minDate − boolean, Minimum date which is available for selection
• minMode − BsDatepickerViewMode, Minimum view mode : day, month, or year
• outsideClick − boolean, Close datepicker on outside click, default: true
• outsideEsc − boolean, Close datepicker on escape click, default: true
• placement − "top" | "bottom" | "left" | "right", Placement of a datepicker. Accepts: "top", "bottom", "left", "right", default: bottom
• triggers − string, Specifies events that should trigger. Supports a space separated list of event names., default: click

Outputs

• bsValueChange − Given when the datepicker value has been updated
• onHidden- while the datepicker is hidden, emits an event
• onShown- Emits an occurrence when the date selector is shown

Methods

• show() − Opens the datepicker for an element. This is considered a 'manual' datepicker trigger.
• hide()-Closes datepicker for an element. This is considered a 'manual' datepicker trigger.
• toggle()-Toggles the datepicker for an element. This is considered a 'manual' datepicker trigger.
• setConfig() − Set datepicker config

BsDaterangepickerDirective

selector

• [bsDaterangepicker]

Inputs

• bsConfig − Partial7 <BsDaterangepickerConfig>, Config object for daterangepicker
• bsValue − Date, Initial value of daterangepicker
• container − string, A selector specifying the element the daterangepicker should be appended to. default: body
• dateCustomClasses − DatepickerDateCustomClasses[], Date custom classes
• datesDisabled − Date[], Disable specific dates
• datesEnabled − Date[], Enable specific dates
• dateTooltipTexts − DatepickerDateTooltipText[], Date tooltip text
• daysDisabled − number[], Disable Certain days in the week
• isDisabled − boolean, Indicates whether daterangepicker's content is enabled or not
• isOpen − boolean, Returns whether or not the daterangepicker is currently being shown
• maxDate − boolean, Maximum date which is available for selection
• minDate − boolean, Minimum date which is available for selection
• minMode − BsDatepickerViewMode, Minimum view mode : day, month, or year
• outsideClick − boolean, Close daterangepicker on outside click, default: true
• outsideEsc − boolean, Close daterangepicker on escape click, default: true
• placement − "top" | "bottom" | "left" | "right", Placement of a daterangepicker. Accepts: "top", "bottom", "left", "right", default: bottom
• triggers − string, Specifies events that should trigger. Supports a space separated list of event names., default: click

Outputs

• bsValueChange − Emits when the value of daterangepicker has been changed
• onHidden- When the daterangepicker is hidden, emits an event
• onShown: Issues an event when the daterangepicker is shown

Methods

• how() − Opens an element's datepicker. This is considered a 'manual' triggering of the datepicker.
• hide() − Closes an element's datepicker. This is considered a 'manual' triggering of the datepicker.
• toggle() − Toggles an element's datepicker. This is considered a 'manual' triggering of the datepicker.
• setConfig() − Set config for datepicker

Example

Since we are going to use DatePicker and DateRangePicker, we have to update app.module.ts to use BsDatepickerModule and BsDatepickerConfig in the ngx-bootstrap collapse chapter.

To use BsDatepickerModule and BsDatepickerConfig, update app.module.ts.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot()
   ],
   providers: [AlertConfig, BsDatepickerConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Update index.html to use the bs-datepicker.css.

app.module.ts

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Ngxbootstrap</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
      <link href="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css" rel="stylesheet" >
   </head>
   <body>
      <app-root></app-root>
   </body>
</html>

Update test.component.html to use the datepickers.

test.component.html

<div class="row">
   <div class="col-xs-12 col-12 col-md-4 form-group">
      <input type="text"
         placeholder="Datepicker"
         class="form-control"
         bsDatepicker
         [bsValue]="bsValue"
         [minDate]="minDate"
         [maxDate]="maxDate"
         [daysDisabled]="[6,0]"
         [datesDisabled]="disabledDates"
         [bsConfig]="{ isAnimated: true, dateInputFormat: 'YYYY-MM-DD' }">
   </div>
   <div class="col-xs-12 col-12 col-md-4 form-group">
      <input type="text"
         placeholder="Daterangepicker"
         class="form-control"
         bsDaterangepicker
         [(ngModel)]="bsRangeValue"
         [datesEnabled]="enabledDates"
         [bsConfig]="{ isAnimated: true }">
   </div>
</div>

Update test.component.ts for corresponding variables and methods.

test.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

   bsValue = new Date();
   bsRangeValue: Date[];
   maxDate = new Date();
   minDate = new Date();

   constructor() {
      this.minDate.setDate(this.minDate.getDate() - 1);
      this.maxDate.setDate(this.maxDate.getDate() + 7);
      this.bsRangeValue = [this.bsValue, this.maxDate];
   }

   ngOnInit(): void {
   }
}

Build and Serve

Run the following command to start the angular server.

ng serve