Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

mat-daterangepicker

Package Overview
Dependencies
1
Maintainers
1
Versions
9
Issues
File Explorer

Advanced tools

mat-daterangepicker

Angular material date picker extension to support range selection.

    1.0.1latest

Version published
Maintainers
1
Yearly downloads
11,257
increased by73.72%

Weekly downloads

Readme

Source

MatDaterangepicker

This is an extension library for the native Angular Material Datepicker. Then you can use all the options provided by the Matdatepicker material component.

Demo

Requirements

AngularVersion
angular>= 9.0.0
@angular/material>= 9.0.0

Installation

npm i mat-daterangepicker

import MatDaterangepickerModule in your module

import { MatDaterangepickerModule } from 'mat-daterangepicker'; @NgModule({ imports: [ MatDaterangepickerModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule {}

Angular Material Theme

import code bellow in your material style theme to have compatibility with your current material theme.

@import 'mat-daterangepicker/mat-daterangepicker.theme.scss'; @include mat-daterangepicker-theme($theme);

Usage

// in your component export class DaterangepickerExampleComponent { startDate = new Date() endDate = new Date() } <mat-form-field> <input matInput [matDatepicker]="dpRange" type="text" [value]="startDate" placeholder="Start Date"> <mat-daterangepicker #dpRange></mat-daterangepicker> </mat-form-field> <mat-form-field> <input matInput [matDaterangepickerEnd]="dpRange" type="text" [value]="endDate" placeholder="End Date"> <mat-datepicker-toggle matSuffix [for]="dpRange"></mat-datepicker-toggle> </mat-form-field>

Options

OptionDescription
@Input() dualView: booleanAn input to display two calendars when selecting dates
@Input() applyButton: booleanAn input to display an apply button to close the calendar picker
@Input() showCustomRanges: booleanAn input to display default custom ranges options in the calendar picker
@Ouput() apply: EventEmitterFired when apply button is clicked

Mehods

MethodDescription
applyRangeApply the range and close the calendar picker
clearRangeClear the selected dates

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc