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.
Angular Date Rangepicker component


This library is based on moment js, so install it alongside

$ npm install @sgv/rangepicker [email protected]


import { SgvRangepickerModule } from '@sgv/rangepicker';

  imports: [

Example with material text input (material ui is optional)

    <input matInput [sgvRangepicker]="myDatepicker" placeholder="Choose a date">
    <sgv-rangepicker #myDatepicker></sgv-rangepicker>

Also you can use it with reactive or template driven forms.


You can provide map of options.
Custom color and date format available at this moment

import { SgvRangepickerOptions } from '@sgv/rangepicker';

    providers: [
            provide: SgvRangepickerOptions,
            useValue: {
                color: 'red',  // default is '#3f51b5'
                format: 'DD.MM.YY' // default is 'DD.MM.YYYY'


SgvRangepickerComponent emits datesChanged event when interval is changed.


English is the default language.
Russian is also available at this moment if you provide

    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.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.