Bootstrap Daterange picker for angular2
npm install angular-2-daterange-pickerbash
NPM
npm install angular-2-daterangepicker
`
$3
$3
Use this as:
<date-range-picker [fromDate]="'04/01/2017'" [toDate]="'04/02/2017'" [format]="'DD/MM/YYYY'" (datesSelected)="demo($event)"> </date-range-picker>
currently only three options are made available
1. format
Use this to configure date format which you want. If not provided it defaults to YYYY-MM-DD
2. fromDate and
3. toDate
Both dates are supposed to be string and are accepted in format provided.
If not provided then both dates defaults to current date in provided format
To get selected dates subscribe to datesSelected event as shown above
which passes a javascript object in following format
{
fromDate: contains a moement object, format it as per your needs,
toDate: contains a moement object, format it as per your needs
}
$3
$3
moment.js version greater than 2.17.1
moment-range.js version 2.2.0
also you should have installed @types/node or see here for more information.
I will suggest you to install dependancy modules before this module
If you are using bootstrap.css then just include following styliing in your code
`bash
`
if you do not want to include whole bootstrap.css then include this css in your code.
see this plunker to see how to configure it with system.js loader and demo
###Usage
Import DaterangepickerModule into your module as following
`bash
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { DaterangepickerModule } from 'angular-2-daterangepicker';
@NgModule({
imports: [BrowserModule, DaterangepickerModule],
declarations: [ AppComponent ],
bootstrap: [AppComponent]
})
export class AppModule {
}
`
###options
Currently very minimum number of options are available but I will keep on developing and adding more and more options
`bash
format: date format
startDate: Default start date
endDate: default end date
minDate: default minimum date not including this date
maxDate: default maximum date not including this date
inactiveBeforeStart: blurs all dates before selected start date
autoApply: removes apply and cancel buttons and applies as soon as user selects end date
`
All dates are suppoesed to be string and in format as you are passing.
You can also
`bash
import { Options } from 'angular-2-daterangepicker';
`
class for passing options to the component.
##Events
Subscribe to rangeSelected event as
`bash
`
the event listener will receive a javscript object conaining
`bash
{
start: moment object representing start date selected by user
end: moment object representing end date selected by user
}
`
###How pass options to the component
The input box automatically takes class of the date-range-picker tag
`bash
import { Component } from '@angular/core';
@Component({
selector: "my-datepicker-demo",
template:
})
export class AppComponent{
daterangepickerOptions = {
startDate: '09/01/2017',
endDate: '09/02/2017',
format: 'DD/MM/YYYY'
}
}
``