How to use bootstrap datepicker input field in angular2

Question

I have followed the undermentioned steps and I have been able to achieve up to the following image.

Install nodejs of version 6.9.1. It comes with npm 3.10.8
Then I followed the following installation steps.
Now when I try to use <ngb-datepicker></ngb-datepicker> I am able to see this type of screen.

But I am not able to understand how to use input[ngbDatepicker]

I tried <input ngbDatepicker /> but only a text box appears. When I focus it, it is not showing the date picker.

Here is the link which I am using.

Yes. After adding this just design got change. But nothing extra. — Partha Sarathi Ghosh
– Partha Sarathi Ghosh, Commented Nov 16, 2016 at 5:51

ranakrunal9 · Accepted Answer · 2016-11-16 06:47:25Z

6

To display datepicker on focus you can use focus event of input by using template reference as below :

<input ngbDatepicker #d="ngbDatepicker" (focus)="d.open()">

Or you can add trigger toggle event of datepicker on button click as per Datepicker in a popup example of Datepicker

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

// HTML
<div class="input-group">
  <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
  <div class="input-group-addon" (click)="d.toggle()" >
    <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
  </div>
</div>

answered Nov 16, 2016 at 6:47

ranakrunal9

13.6k3 gold badges44 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

silentsod Over a year ago

Date format needs an NgbDateParserFormatter per ng-bootstrap.github.io/#/components/datepicker

Partha Sarathi Ghosh Over a year ago

Still I am not able to use it. Very minimal documentation. Please help.

ranakrunal9 Over a year ago

I think , for date formatting you have to create your custom Formatter by extending NgbDateParserFormatter as per github.com/ng-bootstrap/ng-bootstrap/blob/master/src/datepicker/… and need add it as provider in your component like {provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter} as example Internationalization of datepickers on page ng-bootstrap.github.io/#/components/datepicker

Community · Accepted Answer · 2017-05-23 12:17:37Z

3

After working a lot and got the suggestion from ranakrunal9. I have reached in this following code base. It is working fine in all aspect (But still only one issue I have that, the datepicker is not being closed if I click outside of the datepicker) Here is the plunker

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {NgbModule, NgbDateParserFormatter, NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
import { Component, OnInit, Input, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  imports: [
    NgbModule,
    BrowserModule,
    NgbDateParserFormatter
  ],
  selector: 'my-app',
  templateUrl: 'template.html'
})
export class App {


}

@NgModule({
  imports: [ BrowserModule, 
    NgbModule.forRoot()],
  providers : [
    {provide: NgbDateParserFormatter, useClass: forwardRef(() => CustomDateParserFormatter)}
  ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}



export class CustomDateParserFormatter extends NgbDateParserFormatter {
  parse(value: string): NgbDateStruct {
    if (value) {
      const dateParts = value.trim().split('/');
      /*
     Put your logic for parsing
      */
    }
    return null;
  }

  format(date: NgbDateStruct): string {
    return date ?
        date.day+'/'+date.month+'/'+date.year :
        '';
  }
}

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Nov 21, 2016 at 6:49

Partha Sarathi Ghosh

11.7k22 gold badges64 silver badges84 bronze badges

2 Comments

dabicho Over a year ago

Did you find out how to close it on blur? I tried binding (blur) to execute d.close(). The problem is, "using the calendar" counts as blur too and so the calendar closes before I get to pick a date.

Partha Sarathi Ghosh Over a year ago

Yes, Same issue I also found, did not solved it yet. If you can place a new question and link it here also I think it will be helpful. Please also create a plunker.

Collectives™ on Stack Overflow

How to use bootstrap datepicker input field in angular2

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related