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)
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.
This awesome script developed by chesminsky. Visit their official repository for more information and follow for future updates.
