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' },
	],
})

Demo

Click here!.