npm package: @forter/date-range-picker
Description: date-range-picker from Forter Components
Author: Forter Developers
Latest version: 1.21.2

# fc-date-range-picker

An element by Forter
<!-- Author: dondrich <david.ondrich@forter.com> -->

## Usage

```html
<script>
   import '@forter/date-range-picker';
</script>

<fc-date-range-picker>
</fc-date-range-picker>
```

## Examples
```html
<!-- Preset with no dates -->
<fc-date-range-picker preset="LAST_365_DAYS" .dates="${[]}">
</fc-date-range-picker>

<!-- Timestamp Int Dates no preset -->
<fc-date-range-picker preset="" .dates="${[1588305600000,1589169599999]}">
</fc-date-range-picker>

* <!-- Timestamp String Dates no preset -->
<fc-date-range-picker preset="" .dates="${['1588305600000','1589169599999']}">
</fc-date-range-picker>

* <!-- Max Range of 10 days -->
<fc-date-range-picker preset="" maxDays=10 .dates="${['1588305600000','1589169599999']}">
</fc-date-range-picker>

* <!-- Max Date -->
<fc-date-range-picker preset="" maxDate="2024-04-20" .dates="${['1588305600000','1589169599999']}">
</fc-date-range-picker>

  * * <!-- Subset of presets and no calendar -->
<fc-date-range-picker .presets="${['THIS_MONTH', 'LAST_MONTH']}" hidecalendar>
</fc-date-range-picker>
```

## Properties

| Property                      | Attribute       | Type      | Default             | Description                                      |
|-------------------------------|-----------------|-----------|---------------------|--------------------------------------------------|
| `dates`                       | `dates`         | `any[]`   |                     | Dates picked. example: `[]`                      |
| `disableDatePickerRangeLimit` |                 | `number`  |                     |                                                  |
| `disabled`                    | `disabled`      | `boolean` | false               | Disabled boolean. default: false, example: true  |
| `format`                      | `format`        | `string`  | "DD MMM YYYY HH:mm" | Date Format. default: `DD-MM-YYYY HH:mm`, example: `DD/MM/YYYY HH:mm` |
| `hideCalendar`                | `hidecalendar`  | `boolean` | false               | Hide calendar and only show presets.             |
| `maxDate`                     | `maxDate`       | `string`  |                     | Limit maximum date can be picked                 |
| `maxDays`                     | `maxDays`       | `string`  |                     | Limit maximum date range in dyas (i.e. 10 will allow only range of 10 days), default none. example: 10 |
| `minDate`                     | `minDate`       | `string`  |                     | Limit minimum date can be picked                 |
| `pickerOptions`               | `pickerOptions` | `{}`      | {}                  | Options for litepicker to override the defaults  |
| `preset`                      | `preset`        | `string`  |                     | Time Range Preset. example: `LAST_90_DAYS`       |
| `presets`                     | `presets`       | `any[]`   |                     | Available presets for user to pick (if only a subset is required). If all presets are required, leave empty.<br />example: `["THIS_MONTH", "LAST_MONTH"]` |
| `right`                       | `right`         | `boolean` |                     | If date-picker is aligning to right hand side. example: true |
| `top`                         | `top`           | `boolean` |                     | If date-picker is aligning to top hand side. example: true |
| `utc`                         | `utc`           | `number`  | 0                   |                                                  |
| `utctype`                     | `utctype`       | `string`  | ""                  |                                                  |

## Events

| Event    |
|----------|
| `change` |

## CSS Custom Properties

| Property                  | Description                          |
|---------------------------|--------------------------------------|
| `--fc-date-picker-color`  | input text color. example: `pink`    |
| `--fc-date-picker-height` | date picker width. example: `100px`  |
| `--fc-date-picker-width`  | date picker width. example: `1000px` |