https://github.com/nedpuganti/ngx-custom-daterangepicker
https://github.com/nedpuganti/ngx-custom-daterangepicker
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/nedpuganti/ngx-custom-daterangepicker
- Owner: nedpuganti
- Created: 2020-04-17T02:04:11.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-11-19T19:29:34.000Z (7 months ago)
- Last Synced: 2025-04-05T19:22:58.084Z (3 months ago)
- Language: TypeScript
- Homepage: https://nedpuganti.github.io/ngx-custom-daterangepicker/
- Size: 4.96 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-angular - ngx-custom-daterangepicker - An Angular date range picker component with advanced functionality and Material Design support. It allows for easy date range selection with customizable options and is simple to integrate. (Table of contents / Third Party Components)
- awesome-angular - ngx-custom-daterangepicker - An Angular date range picker component with advanced functionality and Material Design support. It allows for easy date range selection with customizable options and is simple to integrate. (Table of contents / Third Party Components)
README
# NgxAdvancedDaterangepicker
`NgxAdvancedDaterangepicker` is an Angular date range picker component with advanced functionality and Material Design support. It allows for easy date range selection with customizable options and is simple to integrate into any Angular project.
## Features
- Select predefined date ranges (e.g., today, this week, etc.).
- Emits date selection events for further customization.
- Easily integrates with Angular Material.
## Installation
To install `NgxAdvancedDaterangepicker`, you can use either `npm` or `yarn`:
```bash
# Using npm
npm install ngx-advanced-daterangepicker
# Using yarn
yarn add ngx-advanced-daterangepicker
```
Additionally, install the required Angular Material and Luxon dependencies:
```bash
ng add @angular/material
npm install luxon @angular/material-luxon-adapter
```
## Usage
### Import the Module
In your `app.module.ts`, import the `NgxAdvancedDaterangepickerModule`:
```typescript
import { NgxAdvancedDaterangepickerModule } from 'ngx-advanced-daterangepicker';
@NgModule({
declarations: [/* Your Components */],
imports: [
/* Other Modules */
NgxAdvancedDaterangepickerModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
```
### Add Styles
Include the Angular Material theme in your global styles (e.g., `styles.scss`):
```scss
@import "@angular/material/prebuilt-themes/azure-blue.css";
```
### Add Component to Template
In your Angular component template, use the `ngx-advanced-daterangepicker` component:
```html
```
### Handling Date Selection
In your component `.ts` file, implement the `getDateSelection` method to handle date changes:
```typescript
export class MyComponent {
getDateSelection(event: any) {
console.log('Selected Date Range:', event);
// Handle the selected date range here
}
}
```
## Development
To build and serve the project locally, you can run the following commands:
```bash
# Build the library
ng build --watch ngx-advanced-daterangepicker
# Serve the demo application
ng serve ngx-custom-daterangepicker
```