Angular Date Rangepicker component with presets
A small and Material Design inspired date range picker with preset date ranges for faster date selection which help to choose date range.
Installation
This library is based on moment js, so install it alongside
$ npm install @sgv/rangepicker [email protected]
Usage
import { SgvRangepickerModule } from '@sgv/rangepicker';
@NgModule({
imports: [
SgvRangepickerModule
]
})
Example with material text input (material ui is optional)
<mat-form-field>
<input matInput [sgvRangepicker]="myDatepicker" placeholder="Choose a date">
<sgv-rangepicker #myDatepicker></sgv-rangepicker>
</mat-form-field>
Also you can use it with reactive or template driven forms.
Options
You can provide map of options.
Custom color and date format available at this moment
import { SgvRangepickerOptions } from '@sgv/rangepicker';
@NgModule({
providers: [
{
provide: SgvRangepickerOptions,
useValue: {
color: 'red', // default is '#3f51b5'
format: 'DD.MM.YY' // default is 'DD.MM.YYYY'
}
}
],
})
Events
SgvRangepickerComponent emits datesChanged event when interval is changed.
Internationalization
English is the default language.
Russian is also available at this moment if you provide
@NgModule({
providers: [
{ provide: LOCALE_ID, useValue: 'ru' },
],
})
See live demo and download source code.
DEMO | DOWNLOAD
This awesome script developed by chesminsky. Visit their official repository for more information and follow for future updates.