https://github.com/changhuixu/date-range-picker

Angular components for Date Range Picker and Date Picker using ng-bootstrap
https://github.com/changhuixu/date-range-picker

angular boostrap4 bootstrap date-range date-range-picker datepicker daterange daterange-picker daterangepicker ng-bootstrap ngbootstrap

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/changhuixu/date-range-picker
• Owner: changhuixu
• Created: 2018-03-20T21:59:31.000Z (almost 7 years ago)
• Default Branch: main
• Last Pushed: 2024-03-18T16:18:28.000Z (11 months ago)
• Last Synced: 2024-11-10T02:55:06.151Z (3 months ago)
• Topics: angular, boostrap4, bootstrap, date-range, date-range-picker, datepicker, daterange, daterange-picker, daterangepicker, ng-bootstrap, ngbootstrap
• Language: TypeScript
• Homepage: https://changhuixu.github.io/date-range-picker/
• Size: 2.4 MB
• Stars: 14
• Watchers: 3
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-angular-components - changhuixu/date-range-picker - An angular component for Date Range Picker using ng-bootstrap (UI Components / Form)

README

        
# 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.

[![Build Status](https://github.com/changhuixu/date-range-picker/actions/workflows/main.yml/badge.svg)](https://github.com/changhuixu/date-range-picker/actions)

[![npm](https://img.shields.io/npm/v/@uiowa/date-range-picker.svg?style=flat-square)](https://www.npmjs.com/package/@uiowa/date-range-picker)

```bash

npm i @uiowa/date-range-picker

```

## [Demo](https://changhuixu.github.io/date-range-picker/)

![date range picker demo](./date-range-picker-demo.gif)

## Models

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

```typescript

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

- ``: a wrapper of ng-bootstrap date picker

- ``: a date range picker based on ng-bootstrap

## Usage

```typescript

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

@NgModule({

  declarations: [AppComponent],

  imports: [

    ...,

    DateRangePickerModule,

    ...

    ],

  providers: [],

  bootstrap: [AppComponent]

})

```

```html

// in your component.html

```

```typescript

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);

  }

}

```