# Daterangepicker Integration

This library integrates the [daterangepicker](https://github.com/dangrossman/daterangepicker) component from Dan Grossman, providing a styled Angular wrapper that matches the existing Material date picker styling.

## Setup

### 1. Install Dependencies

The `daterangepicker` package is included as a dependency. You also need to include jQuery and moment.js (or dayjs) in your application:

```bash
npm install jquery moment
# OR
npm install jquery dayjs
```

### 2. Include Scripts and Styles

In your `angular.json`:

```json
{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/moment/min/moment.min.js",
              "node_modules/daterangepicker/daterangepicker.js"
            ],
            "styles": [
              "node_modules/daterangepicker/daterangepicker.css"
            ]
          }
        }
      }
    }
  }
}
```

Or include in your `index.html`:

```html
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
```

## Usage

### In Dynamic Filter Component

Use `type: 'date-range-picker'` in your filter configuration:

```typescript
import { DynamicFilterItem } from '@cqa-lib/cqa-ui';

const filterConfig: DynamicFilterItem[] = [
  {
    label: 'Date Range',
    key: 'dateRange',
    type: 'date-range-picker', // Use this instead of 'date-range'
    placeholder: 'Select date range'
  }
];
```

### Standalone Component

You can also use the component directly:

```html
<cqa-daterangepicker
  label="Select Date Range"
  placeholder="Choose dates"
  [startDate]="startDate"
  [endDate]="endDate"
  [maxDate]="maxDate"
  [ranges]="dateRanges"
  [autoApply]="false"
  [alwaysShowCalendars]="true"
  (datesUpdated)="onDateRangeChange($event)"
  (applyClicked)="onApply($event)">
</cqa-daterangepicker>
```

### With Reactive Forms

The component implements `ControlValueAccessor`, so it works seamlessly with Angular forms:

```typescript
import { FormGroup, FormControl } from '@angular/forms';

form = new FormGroup({
  dateRange: new FormGroup({
    start: new FormControl(null),
    end: new FormControl(null)
  })
});
```

```html
<cqa-daterangepicker
  [formControl]="form.get('dateRange')"
  [maxDate]="maxDate">
</cqa-daterangepicker>
```

## Inputs

- `label?: string` - Label text displayed above the input
- `placeholder?: string` - Placeholder text for the input
- `disabled?: boolean` - Disable the picker
- `startDate?: Date | string` - Initial start date
- `endDate?: Date | string` - Initial end date
- `minDate?: Date | string` - Minimum selectable date
- `maxDate?: Date | string` - Maximum selectable date
- `ranges?: any` - Predefined date ranges (see daterangepicker docs)
- `autoApply?: boolean` - Automatically apply selection (default: false)
- `alwaysShowCalendars?: boolean` - Always show both calendars (default: false)
- `opens?: 'left' | 'right' | 'center'` - Dropdown opening direction
- `drops?: 'down' | 'up' | 'auto'` - Dropdown position
- `isInvalidDate?: (date: Date) => boolean` - Custom date validation

## Outputs

- `datesUpdated` - Emitted when dates change
- `cancelClicked` - Emitted when cancel button is clicked
- `applyClicked` - Emitted when apply button is clicked

## Styling

The component is styled to match the existing Material date picker styling. All styles are scoped to `.cqa-ui-root` to prevent conflicts with your application styles.

The daterangepicker dropdown will automatically inherit the library's styling and will not affect your existing date range select component.

## Notes

- The component requires jQuery and moment.js (or dayjs) to be loaded globally
- The styling is scoped to prevent conflicts with existing components
- The component works alongside the existing `date-range` type without affecting it