# @havietduc91/vue-date-range-picker

> A date range picker Forked from Owumaro repository

Latest version **0.2.5** (published 2019-09-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install @havietduc91/vue-date-range-picker
pnpm add @havietduc91/vue-date-range-picker
yarn add @havietduc91/vue-date-range-picker
bun add @havietduc91/vue-date-range-picker
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.5 |
| Published | 2019-09-27 |
| First published | 2019-08-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | DucHV |
| Maintainers | havietduc91 |

## Links

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

## Dependencies (1)

- [moment](https://npm.io/package/moment.md) ^2.23.0

## Recent versions

- 0.2.5 (latest) — 2019-09-27
- 0.2.4 — 2019-08-29
- 0.2.3 — 2019-08-29
- 0.2.2 — 2019-08-29
- 0.2.1 — 2019-08-29
- 0.2.0 — 2019-08-29
- 0.1.9 — 2019-08-28
- 0.1.8 — 2019-08-28
- 0.1.7 — 2019-08-28
- 0.1.6 — 2019-08-28
- 0.1.5 — 2019-08-28
- 0.1.4 — 2019-08-28
- 0.1.3 — 2019-08-27
- 0.1.2 — 2019-08-27
- 0.1.1 — 2019-08-27
- … 1 more at https://npm.io/package/@havietduc91/vue-date-range-picker/versions

## README

# vue-date-range-picker
A vue component using Bootstrap 4 styles for date range selection

![Vue-Treeselect Screenshot](https://i.imgur.com/YgPhJTk.png)

[Live demo (jsfiddle)](https://jsfiddle.net/Owumaro/qw7mpfr8/)

### Features

- Date range selection
- Compare feature: select a second date range
- No integration: DIY with your favorite vue components or js libraries
- Bootstrap 4 styles (requires Bootstrap 4 CSS)
- Returns Moment.js instances (requires moment.js)

## Installation

```
npm install --save @havietduc91/vue-date-range-picker
```

## Usage

### Webpack

#### JavaScript
```js
// Import the component
import DateRangePicker from '@havietduc91/vue-date-range-picker'
import '@havietduc91/vue-date-range-picker/dist/vue-date-range-picker.css'

export default {
  // Register the component
  components: { DateRangePicker },
  
  // Create a method for the submit event
  methods: {
    updateRanges: function(range) {
      ...
    }
  },
  ...
}
```

#### HTML template
```html
<date-range-picker v-on:submit="updateRanges" />
```

## API

### Events

As the component needs to transmit multiple values (`startDate`, `endDate`, `compare`, `startDateCompare`, `endDateCompare`), it can not use `v-model`.

Instead, it triggers 2 events:
- `submit`: when the submit button is clicked; provides an `Object` argument with the 5 attributes mentioned above
- `cancel`: when the cancel button is clicked

### Props

Prop | Type | Default | Description
-----|------|---------|------------
`calendar-count` | `Number` | `2` | Number of calendars to display
`allow-compare` | `Boolean` | `true` | Enable/disable the comparison feature
`ranges` | `Object` | `{ currentMonth: { ... }, lastMonth: { ... } }` | Predefined ranges displayed in select menu(s)
`compareRanges` | `Object` | `{ currentMonth: { ... }, lastMonth: { ... } }` | Predefined compare ranges displayed in select menu(s)
`default-range-select` | `String` | `currentMonth` | Key of the range to select by default
`default-range-select-compare` | `String` | `lastMonth` |  Key of the range to select by default (compare)

## Development

### Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies
```
npm run build
```

## Inspiration

- Google Analytics date range picker
- https://github.com/dangrossman/daterangepicker
- https://github.com/Owumaro/vue-date-range-picker

## TODO
- Tests
- CSS without bootstrap dependency

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