ngbdatepicker

ngbdatepicker

ngbdatepicker is a configurable datepicker directive that is used for selection of date. ngb-datepicker is helping you with selection of a date. input[ngbDatepicker] is a directive that makes it easy to add datepicker on input fields. datepicker directive is used for inline with ngbdatepicker and also we can use it as a popup on the input field with input[ngbDatepicker] directive.

ngbdatepicker example

inline datepicker

<!-- 1. inline datepicker -->
<ngb-datepicker #d></ngb-datepicker>
ngbdatepicker

Inline datepicker Example Code

In your angular project, you need to create three files in app folder (datepicker.html, datepicker.module.ts and datepicker.ts).

ngbdatepicker
datepicker.html
<p>Inline datepicker Example</p>

<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>

<hr/>

<button class="btn btn-sm btn-outline-primary mr-2" (click)="selectToday()">Select Today</button>
<button class="btn btn-sm btn-outline-primary mr-2" (click)="dp.navigateTo()">To current month</button>
<button class="btn btn-sm btn-outline-primary mr-2" (click)="dp.navigateTo({year: 2013, month: 2})">To Feb 2013</button>

<hr/>

<pre>Month: {{ date.month }}.{{ date.year }}</pre>
<pre>Model: {{ model | json }}</pre>
datepicker.module.ts
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { NgbdDatepickerBasic } from './datepicker-basic';

@NgModule({
  imports: [BrowserModule, FormsModule, NgbModule],
  declarations: [NgbdDatepickerBasic],
  exports: [NgbdDatepickerBasic],
  bootstrap: [NgbdDatepickerBasic]
})
export class NgbdDatepickerBasicModule {}
datepicker.ts
import {Component} from '@angular/core';
import {NgbDateStruct, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-datepicker-basic',
  templateUrl: './datepicker-basic.html'
})
export class NgbdDatepickerBasic {

  model: NgbDateStruct;
  date: {year: number, month: number};

  constructor(private calendar: NgbCalendar) {
  }

  selectToday() {
    this.model = this.calendar.getToday();
  }
}

popup datepicker

<!-- 2. datepicker in the popup -->
<input type="text" ngbDatepicker #d="ngbDatepicker"/>
ngbdatepicker

Popup datepicker Example Code

In your angular project, you need to create three files in app folder (datepicker-popup.html, datepicker-popup.module.ts and datepicker -popup.ts).

datepicker-popup.html
<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <input class="form-control" placeholder="yyyy-mm-dd"
             name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
      </div>
    </div>
  </div>
</form>

<hr/>
datepicker-popup.module.ts
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { NgbdDatepickerPopup } from './datepicker-popup';

@NgModule({
  imports: [BrowserModule, FormsModule, NgbModule],
  declarations: [NgbdDatepickerPopup],
  exports: [NgbdDatepickerPopup],
  bootstrap: [NgbdDatepickerPopup]
})
export class NgbdDatepickerPopupModule {}
datepicker-popup.ts
import {Component} from '@angular/core';

@Component({
  selector: 'ngbd-datepicker-popup',
  templateUrl: './datepicker-popup.html'
})
export class NgbdDatepickerPopup {
  model;
}

In the example above the template variable #d will point to the instance of the NgbDatepicker the component in the first case. In the second it will point to the instance of the NgbInputDatepicker the directive that handles the popup with the inline datepicker component.

ngbdatepicker date format

By using the following code you can create custom formate.

import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { Injectable } from '@angular/core';
import { isNumber, toInteger, padNumber } from '@ng-bootstrap/ng-bootstrap/util/util';

@Injectable()
export class NgbDateCustomParserFormatter extends NgbDateParserFormatter {
  parse(value: string): NgbDateStruct {
    if (value) {
      const dateParts = value.trim().split('-');
      if (dateParts.length === 1 && isNumber(dateParts[0])) {
        return {day: toInteger(dateParts[0]), month: null, year: null};
      } else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) {
        return {day: toInteger(dateParts[0]), month: toInteger(dateParts[1]), year: null};
      } else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) {
        return {day: toInteger(dateParts[0]), month: toInteger(dateParts[1]), year: toInteger(dateParts[2])};
      }
    }
    return null;
  }

  format(date: NgbDateStruct): string {
    return date ?
        `${isNumber(date.day) ? padNumber(date.day) : ''}-${isNumber(date.month) ? padNumber(date.month) : ''}-${date.year}` :
        '';
  }
}

Reference

https://ng-bootstrap.github.io/#/components/datepicker/overview

Visit the angular tutorial list. And make strong your angular concept. click here. wuschools.com is always written about agular concept for the angular lover. Ang writes about how angular makes your life easy if you are a web site developer.

Leave a Reply

Close Menu