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

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.


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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.