changhuixu/date-range-picker

Angular components for Date Range Picker and Date Picker using ng-bootstrap

DateRangePicker

An Angular library of Date Range Picker. Dependencies: Angular, ng-bootstrap, Bootstrap >4 (css)

Since v7.0.0, this library is only compatible with Angular >=13 and ng-bootstrap >=12.

Since v6.0.0, this library is only compatible with Angular >=13 and ng-bootstrap >=11.

Since v5.0.0, this library is only compatible with Angular >=12 and ng-bootstrap >=10.

Since v4.0.0, this library is only compatible with Angular >=10 and ng-bootstrap >=7.

Since v3.0.0, this library requires @angular/localize, due to updates in Angular 9 and ng-bootstrap 6.

npm i @uiowa/date-range-picker

Demo

Models

• DateRange: an object represents a date range, includes start date and end date. e.g.,

const d1 = new DateRange();
const d2 = new DateRange(new Date(), new Date(2018, 9, 10));
const d3 = DateRange.nextTwoWeeks();
const d4 = DateRange.nextDays(10);
const d5 = DateRange.nextMonth();

Components

• <date-picker></date-picker>: a wrapper of ng-bootstrap date picker

• <date-range-picker></date-range-picker>: a date range picker based on ng-bootstrap

Usage

import { DateRangePickerModule } from '@uiowa/date-range-picker';

@NgModule({
  declarations: [AppComponent],
  imports: [
    ...,
    DateRangePickerModule,
    ...
    ],
  providers: [],
  bootstrap: [AppComponent]
})

// in your component.html
<date-range-picker
  [(dateRange)]="dateRange"
  [maxDate]="maxDate"
></date-range-picker>
<date-picker [(date)]="date"></date-picker>

import { Component, OnInit } from '@angular/core';
import { DateRange } from '@uiowa/date-range-picker';

@Component({
  ...
})
export class AppComponent implements OnInit {
  dateRange = new DateRange();
  maxDate = new Date();
  date: Date;
  ngOnInit(): void {
    this.maxDate.setDate(this.maxDate.getDate() + 20);
  }
}

date-range-picker's Issues

how can I trigger onchange event ?

i want to fire a methon, on date a range select,
can anyone suggest me a way please?

Opening picker on dates before/after current two months doesn't display range

Opening the datepicker should default to opening with part of the selected range instead of todays month + the next month.

For example. If today is 11/11/18 opening the date picker will display September and October, even if the range is 1/1/2018 to 1/15/2018.

Expected results should display the end of the range as part of the displayed months.

Single Date selection

I want to select a single date but is not working. The DateRange.end cannot have value nor the calendar close. Could you add this feature if it's not yet done done.

Can't able to use this dependency

node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

15 static ɵfac: i0.ɵɵFactoryDeclaration<DatePickerComponent, never>;

date picker is not able to retrieve the value.

when I try to have some value in date, it couldnot show the value.

Opening / Closing picker from text area only works 1 time

To Recreate:
Click text area once to open calendar
Click again to close calendar
Click text area again to open calendar - doesn't open without changing focus

Environment:
Chrome

When setting default date opening picker does not reflect these values

Reproduce
Set default date for date picker to be not the current month. See the default values on the page and open calendar, the calendar does not reflect the range values.

Example:
//ts
creditLimitRange = new DateRange(
new Date(2018, 10, 24),
new Date(2018, 11, 1)
);
//html
<date-range-picker id="creditLimitDate" [(dateRange)]="creditLimitRange">

After rendering the input will have dates "11/24/2018 - 12/1/2018" but opening the datepicker will not have that range selected, just todays date.