Check DEMO
npm install @qqnc/ngx-daterangepicker --save
Ensure you import the module and the dependencies: In your module files. e.g. app.module.ts
import { NgxDaterangepickerModule } from '@qqnc/ngx-daterangepicker';
@NgModule({
imports: [
BrowserModule,
NgxDaterangepickerModule
...OtherModules
] // along with your other modules
})
export class AppModule {}
Declare in your html
<lib-daterangepicker [(start)]="start" [(end)]="end" format="MM-DD-YYYY" opens="left" [pill]="true"></lib-daterangepicker>
start
- [(string
| moment
)] - two-way binding variable of the start date. It will also return when you apply.
end
- [(string
| moment
)] - two-way binding variable of the end date. It will also return when you apply.
format
- [string
] - the format of the input. e.g: MM-DD-YYYY.
outputFormat
- [string
] - the format of the return. e.g: MM-DD-YYYY.
minDate
- [string
| moment
] - the earlist date that user can select.
maxDate
- [string
| moment
] - the lastest date that user can select.
opens
- [string
] - the side of the opened calendar. options: "left" or "right".
pill
- [boolean
] - the style of the button. pill button if true, input field if false.
ranges
- [boolean
or array
] - show ranges options. shown if true, hide if false.
complete
- (function
) - the callback after selection. e.g: (complete)="testCallback($event)". $event will return { start: , string
, end: string
}
import the moment.js
import * as moment from 'moment';
Define the custom range menu
customRanges = [
{
text: 'Today', desc: 'Today', value: 'today',
start: moment(),
end: moment(),
default: true
},
{
text: 'Last 3 Months', desc: 'Last 3 Months', value: 'last3month',
start: moment().subtract(3, 'month').startOf('month'),
end: moment().subtract(1, 'month').endOf('month')
},
{
text: 'Last 6 Month', desc: 'Last Month', value: 'lastmonth',
start: moment().subtract(6, 'month').startOf('month'),
end: moment().subtract(1, 'month').endOf('month')
},
{
text: 'This Year', desc: 'This Year', value: 'thisyear',
start: moment().startOf('year'),
end: moment().endOf('year')
},
{
text: 'Last Year', desc: 'Last Year', value: 'lastyear',
start: moment().subtract(1, 'year').startOf('year'),
end: moment().subtract(1, 'year').endOf('year')
}
];
Bind it with ranges
[ranges]="customRanges"
Check the example in DEMO page
Fork, code, and build it, then run demo.
run npm run build
run npm run serve:demo
for a demo server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D