How to use bootstrap datepicker input field in angular2
Solution 1
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 :
'';
}
}
Solution 2
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>
Comments
-
Partha Sarathi Ghosh over 3 years
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.
-
silentsod over 7 yearsDate format needs an NgbDateParserFormatter per ng-bootstrap.github.io/#/components/datepicker
-
Partha Sarathi Ghosh over 7 yearsStill I am not able to use it. Very minimal documentation. Please help.
-
ranakrunal9 over 7 yearsI 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 exampleInternationalization of datepickers
on page ng-bootstrap.github.io/#/components/datepicker -
dabicho over 7 yearsDid 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 7 yearsYes, 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.