1.0.0 • Published 1 year ago

pg-range-datepicker v1.0.0

Weekly downloads
-
License
-
Repository
github
Last release
1 year ago

PG Range Datepicker

A datepicker (single or range) for your angular app.

  • Select single date or a date range
  • Can pick from 2 months together
  • Select single date or a range
  • No moment.js needed. Works with javascript Date

Getting started

Installation

  • Install by executing npm install pg-range-datepicker or yarn add pg-range-datepicker.
  • Import by adding import { PgRangeDatepickerModule } from 'pg-range-datepicker'.
  • Use by adding <pg-range-datepicker></pg-range-datepicker>.

Usage

Here's an example of basic usage:

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import { PgRangeDatepickerModule } from 'pg-range-datepicker';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    PgRangeDatepickerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<pg-range-datepicker 
    [selectedDate]="(selectedDate)"  [selectedDateEnd]="(selectedDateEnd)">
</pg-range-datepicker>

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: []
})
export class AppComponent imlements OnInit {
    selectedDate = new Date();
    selectedDateEnd = new Date();
    
    constructor() {}

    ngOnInit() {}
}

User guide

Props

Prop nameDescriptionDefault valueExample values
(selectedDate)Set or get the date.undefinednew Date()
(selectedDateEnd)Set or get the end date for the range selector.undefinednew Date()
allowRangeAllow selecting the date rangetruetrue
allowClearDisplay clear btn after date is selected.truetrue
displayTwoMonthsShow 2 months calendar on the datepicker.truetrue
disablePastDatesDisable all the dates less than today's date.falsefalse
disabledDatesList of dates you want to disable.[][new Date(new Date().setDate(20)), new Date(new Date().setDate(25)), new Date(new Date().setDate(26))]
minMinimum date that the user can select.undefinednew Date()
maxMaximum date that the user can select.undefinednew Date()
disabledWhether the date picker should be disabled.falsefalse

Author

Thank you

Keywords

  • Date picker
  • Date Range picker
  • Angular Date picker
  • 2 months date picker
  • Angular2+
  • typescript