# vue-mj-daterangepicker

Latest version **0.1.11** (published 2020-03-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-mj-daterangepicker
pnpm add vue-mj-daterangepicker
yarn add vue-mj-daterangepicker
bun add vue-mj-daterangepicker
```

## 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.1.11 |
| Published | 2020-03-16 |
| First published | 2019-02-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 11 |
| Unpacked size | 2.4 MB |
| Known vulnerabilities | 0 (+4 in 3 direct dependencies) |
| Install scripts | no |
| Author | damien roche |
| Maintainers | damienroche |
| Keywords | datepicker, daterangepicker, vue2 |

## Links

- npm: https://www.npmjs.com/package/vue-mj-daterangepicker
- npm.io page: https://npm.io/package/vue-mj-daterangepicker

## Dependencies (11)

- [pug](https://npm.io/package/pug.md) ^2.0.3
- [vue](https://npm.io/package/vue.md) ^2.5.22
- [date-fns](https://npm.io/package/date-fns.md) ^1.30.1
- [node-sass](https://npm.io/package/node-sass.md) ^4.11.0
- [vue-router](https://npm.io/package/vue-router.md) ^3.0.2
- [sass-loader](https://npm.io/package/sass-loader.md) ^7.1.0
- [vue-svgicon](https://npm.io/package/vue-svgicon.md) ^3.2.2
- [vue-date-fns](https://npm.io/package/vue-date-fns.md) ^1.0.0
- [pug-plain-loader](https://npm.io/package/pug-plain-loader.md) ^1.0.0
- [vue-class-component](https://npm.io/package/vue-class-component.md) ^6.0.0
- [vue-property-decorator](https://npm.io/package/vue-property-decorator.md) ^7.0.0

## Recent versions

- 0.1.11 (latest) — 2020-03-16
- 0.1.10 — 2019-09-25
- 0.1.9 — 2019-09-23
- 0.1.8 — 2019-09-22
- 0.1.7 — 2019-09-19
- 0.1.6 — 2019-08-28
- 0.1.5 — 2019-02-20
- 0.1.4 — 2019-02-20
- 0.1.3 — 2019-02-20
- 0.1.2 — 2019-02-20
- 0.1.1 — 2019-02-20
- 0.1.0 — 2019-02-19

## README

# vue-mj-daterangepicker

<p align="center">
  <img src="./img/preview.png" alt="Size Limit example" width="640" height="398">
</p>

## Installation

You need [Vue.js](https://vuejs.org/) **version 2.0+**.

### 1 Install via npm

```bash
npm install vue-mj-daterangepicker
yarn add vue-mj-daterangepicker
```

### 2 Import and use

```javascript
import Vue from 'vue'
import DateRangePicker from 'vue-mj-daterangepicker'
import 'vue-mj-daterangepicker/dist/vue-mj-daterangepicker.css'

...

Vue.use(DateRangePicker)
```

## Props

| Name              | Type    | Default                                         | Description                                                     |
|-------------------|---------|-------------------------------------------------|-----------------------------------------------------------------|
| `locale`          | String  | en                                              | set the locale ['de', 'es', en', 'fr', 'ru']                    |
| `from`            | String  | null                                            | ISO-8601 date of start range                                    |
| `to`              | String  | null                                            | ISO-8601 date of end range                                      |
| `begin`           | String  | null                                            | ISO-8601 date to display `since beginning` range                |
| `allowFrom`       | String  | null                                            | ISO-8601 date to disable selection of all dates before (strict) |
| `allowTo`         | String  | null                                            | ISO-8601 date to disable selection of all dates after (strict)  |
| `past`            | Boolean | true                                            | allow/disallow user to select past dates                        |
| `future`          | Boolean | true                                            | allow/disallow user to select future dates                      |
| `panel`           | String  | null                                            | choose which panel to be open by default                        |
| `panels`          | Array   | [ 'range', 'week', 'month', 'quarter', 'year' ] | choose which panels to be available                             |
| `yearsCount`      | Number  | 2                                               | number of past/future years to display in `year` panel          |
| `showControls`    | Boolean | true                                            | show bottom controls                                            |
| `theme`           | Object  | see customize section                           | customize colors                                                |
| `width`           | String  | 'auto'                                          | set component width                                             |
| `resetTitle`      | String  | 'Reset'                                         | change Reset button title                                       |
| `submitTitle`     | String  | 'Submit'                                        | change Submit button title                                      |
| `presets`         | Object  | see preset section                              | select which presets to be available                            |
| `rangeDisplayed`  | String  | 'to'                                            | select which range is visible when calendar is displayed        |

### Customize
```javascript
theme = {
  primary: '#3297DB',
  secondary: '#2D3E50',
  ternary: '#93A0BD',
  border: '#e6e6e6',
  light: '#ffffff',
  dark: '#000000',
  hovers: {
    day: '#CCC',
    range: '#e6e6e6'
  }
}
```

### Presets
```
available presets : ['custom', 'today', 'yesterday', 'tomorrow', 'last7days', 'next7days', 'last30days', 'next30days', 'last90days', 'next90days', 'last365days', 'next365days', 'forever']
```
warning: `forever` need `begin` props to be set.

## Events

This datepicker emit three events, @update, @select and @reset

@update is triggered when submit button is clicked.
@select is triggered when a range is selected, can be useful if you don't want to show bottom controls (with showControls = false)
@reset is triggered when reset button is clicked

All return an object with the start and end date, plus the active panel

```javascript
{
  to: '2019-04-23T10:26:00.996Z',
  from: '2018-04-23T10:26:00.996Z'
  panel: 'range'
}
```

## Examples

```vue
<template>
  <date-range-picker :from="$route.query.from" :to="$route.query.to" :panel="$route.query.panel" @update="update"/>
</template>

<script>

export default {
  methods: {
    update(values) {
      this.$router.push({ query: Object.assign({}, this.$route.query, {
        to: values.to,
        from: values.from,
        panel: values.panel
      }) })
    }
  }
}
</script>
```

---
_Source: https://npm.io/package/vue-mj-daterangepicker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._