# au-date-range-picker

> A date range picker custom fit and styled to the needs of Appuniverse

Latest version **0.2.0** (published 2023-06-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install au-date-range-picker
pnpm add au-date-range-picker
yarn add au-date-range-picker
bun add au-date-range-picker
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: no vulnerabilities; high maintenance score.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2023-06-26 |
| First published | 2023-05-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | 14.* \|\| 16.* \|\| >= 18 |
| Dependencies | 9 |
| Unpacked size | 24.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | snenenenenenene |
| Maintainers | snenenenenenene |
| Keywords | ember-addon, appuniverse, daterangepicker |

## Links

- npm: https://www.npmjs.com/package/au-date-range-picker
- Repository: https://github.com/snenenenenenene/au-date-range-picker
- Homepage: https://github.com/snenenenenenene/au-date-range-picker#readme
- Issues: https://github.com/snenenenenenene/au-date-range-picker/issues
- npm.io page: https://npm.io/package/au-date-range-picker

## Dependencies (9)

- [@ember/jquery](https://npm.io/package/@ember/jquery.md) ^2.0.0
- [daterangepicker](https://npm.io/package/daterangepicker.md) ^3.1.0
- [ember-cli-babel](https://npm.io/package/ember-cli-babel.md) ^7.26.11
- [@embroider/macros](https://npm.io/package/@embroider/macros.md) ^1.10.0
- [ember-cli-htmlbars](https://npm.io/package/ember-cli-htmlbars.md) ^6.2.0
- [fastboot-transform](https://npm.io/package/fastboot-transform.md) ^0.1.3
- [ember-cli-moment-shim](https://npm.io/package/ember-cli-moment-shim.md) ^3.8.0
- [@appuniversum/ember-appuniversum](https://npm.io/package/@appuniversum/ember-appuniversum.md) ^2.6.0
- [babel-plugin-transform-object-rest-spread](https://npm.io/package/babel-plugin-transform-object-rest-spread.md) ^6.26.0

## Recent versions

- 0.2.0 (latest) — 2023-06-26
- 0.1.1 — 2023-06-02
- 0.1.0 — 2023-05-26
- 0.0.3 — 2023-05-17
- 0.0.2 — 2023-05-17
- 0.0.1 — 2023-05-16

## README

## Date Input Picker Ember Addon

This Ember addon serves as a date (range) input picker component, utilizing the [Daterangepicker](https://www.daterangepicker.com/) library. It was specifically developed under the commission of the [Agency of Home Affairs (ABB)](https://www.vlaanderen.be/agentschap-binnenlands-bestuur) for integration into the [BurgernabijeBesluitenDatabank](https://burgernabije-besluitendatabank-dev.s.redhost.be/) application.

### Installation

To install this addon, run the following command in your Ember project:

`ember install au-date-range-picker`

### Usage

To use the date input picker component in your Ember project, simply include it in your template:

```hbs
<AuDateRangePicker
  @label="Optional label"
  @start="2023-01-01"
  @end="2023-12-31"
  @width="block"
  @cancelAction={{action this.cancelDatePicker}}
  @applyAction={{action this.applyDatePicker}}
  @hideAction={{action this.hideDatePicker}}
/>
```

```js
@action applyDatePicker(picker, start, end) {
    this.dateRange = start + ' - ' + end;
}

@action hideDatePicker(picker, start, end) {
    return this.start;
}

@action cancel(picker, start, end) {}
```

You can pass in the following arguments to customize the behavior of the component:

- **start** : The initial start date for the date range.
- **end** : The initial end date for the date range.
- **actionName** : The name of the action to be called when the date range is changed. This action will be called with 3 args: **picker**, **start** and **end**

### Configuration
The following options can be passed to `<AuDateRangePicker>`:


#### Format 

| Name     | Default value | Description |
| -------- | ------------- | ----------- |
| @format | `'D MMM, YYYY'` |  |
| @serverFormat | `'YYYY-MM-DD'` |  |
| @direction | `'ltr'` | Locale setting for text direction |
| @regional | `'be-nl'` | Selected region |
| @separator | `' - '` | What character(s) to put between range |


#### Range

| Name     | Default value | Description |
| -------- | ------------- | ----------- |
| @singleDatePicker | `false` | Whether to only select a single date (instead of the default two) |
| @minDate | `undefined` | Lowest possible date. If undefined, no limit is set |
| @maxDate | `undefined` | Highest possible date. If undefined, no limit is set |
| @datelimit | `false` |  |


#### Appearance

| Name     | Default value | Description |
| -------- | ------------- | ----------- |
| @firstDay | `0` | What day of the week to start with. 0 = sunday, 1 = monday... |
| @placeholder | `'Aangepast bereik'` |  |
| @daysOfWeek | `moment.weekdaysMin()` |  |
| @monthNames | `moment.monthsShort()` |  |
| @cancelLabel | `'Terug'` | Text on the cancel button |
| @applyLabel | `'Verder'` | Text on the apply button |
| @customRangeLabel | `'Aangepast bereik'` |  |
| @showCustomRangeLabel | `false` |  |
| @fromLabel | `'Van'` |  |
| @toLabel | `'Tot'` |  |
| @showWeekNumbers | `false` |  |
| @showDropdowns | `false` |  |


#### Classes

| Name     | Default value | Description |
| -------- | ------------- | ----------- |
| @containerClass | `'form-group au-c-content '` | Class for the container |
| @inputClass | `'form-control'` | Class for the input |
| @buttonClasses | `['au-c-button']` | Classes for the buttons |
| @applyClass | `'au-c-button--primary'` | Class for the apply button |
| @cancelClass | `'au-c-button--secondary au-u-margin-right-tiny'` | Class for the cancel button |
| @labelClass | `'au-u-h5'` | Class for all labels/buttons |


#### TimePicker

| Name     | Default value | Description |
| -------- | ------------- | ----------- |
| @timePicker | `false` | Whether to enable the timePicker |
| @timePicker24Hour | `false` |  |
| @timePickerSeconds | `false` |  |
| @timePickerIncrement | `undefined` |  |


#### Dom behaviour

| Name     | Default value | Description |
| -------- | ------------- | ----------- |
| @autoUpdateInput | `true` |  |
| @autoApply | `false` |  |
| @alwaysShowCalendars | `true` |  |
| @context | `undefined` |  |
| @removeDropdownOnDestroy | `false` |  |
| @parentEl | `'body'` |  |


#### Other

| Name     | Default value | Description |
| -------- | ------------- | ----------- |
| @isInvalidDate | `noop` |  |
| @isCustomDate | `noop` |  |
| @opens | `null` |  |
| @drops | `null` |  |
| @linkedCalendars | `false` |  |


#### Ranges
`@ranges` defines the preset ranges on the left of the date picker.
The following format has to be passed:

```js
{
    PRESET-NAME: [STARTDATE, ENDDATE]
}
```


You can optionally use moment.js for dynamic assignment
```js
{
    Yesterday: [
        moment().subtract(1, 'days').startOf('day'),
        moment().subtract(1, 'days').endOf('day'),
    ],
    'Last week': [moment().subtract(7, 'days'), moment()],
}
```

### Development

To run the tests for this addon, run the following command:

`ember test`

### Contributing

Contributions to this addon are welcome. Please submit a pull request with your changes.

#### Updating documentation
If you've added or modified any options in [date-range-picker.js](addon/components/date-range-picker.js), you can run `npm run docs` to automatically update the configuration table. `npm run docs` is run automatically when using `npm run build` as well. 

### License

This addon is licensed under the MIT License. See the LICENSE file for details.

---
_Source: https://npm.io/package/au-date-range-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._