# vue-range-picker-extended

> Vue select date range component

Latest version **0.0.4** (published 2018-11-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-range-picker-extended
pnpm add vue-range-picker-extended
yarn add vue-range-picker-extended
bun add vue-range-picker-extended
```

## 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.0.4 |
| Published | 2018-11-07 |
| First published | 2018-11-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 6.0.0 |
| Dependencies | 3 |
| Unpacked size | 2.6 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Harri Clarke |
| Maintainers | harriclarke |
| Keywords | vue, javascript, vue-component, input, date, time, range, picker, ctk, chronotruck, datepicker, timepicker |

## Links

- npm: https://www.npmjs.com/package/vue-range-picker-extended
- Repository: https://github.com/hc-reassured/vue-range-picker-extended
- Homepage: https://github.com/hc-reassured/vue-range-picker-extended#readme
- Issues: https://github.com/hc-reassured/vue-range-picker-extended/issues
- npm.io page: https://npm.io/package/vue-range-picker-extended

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.5.16
- [moment](https://npm.io/package/moment.md) ^2.22.1
- [moment-range](https://npm.io/package/moment-range.md) ^4.0.1

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 0.0.4 (latest) — 2018-11-07
- 0.0.3 — 2018-11-07
- 0.0.2 — 2018-11-06
- 0.0.1 — 2018-11-06

## README

![vue-range-picker-extended](./assets/logo_sticky.png)

# vue-range-picker-extended

> A vue component for select dates (range mode available) & time

![vue-range-picker-extended](./assets/illu-animated.gif)
#### Dark mode
![vue-range-picker-extended](./assets/illu-animated-dark.gif)
## Demo
[Enjoy here](https://htmlpreview.github.io/?https://github.com/chronotruck/vue-range-picker-extended/blob/master/demo/index.html)

## Installation

### Using yarn

`yarn add vue-range-picker-extended`

### Using npm

`npm i --save vue-range-picker-extended`

## Docs

`npm run serve`

## Usage

### ES6 Modules / CommonJS

```js
import VueCtkDateTimePicker from 'vue-range-picker-extended';
import 'vue-range-picker-extended/dist/vue-range-picker-extended.min.css';

Vue.component('vue-range-picker-extended', VueCtkDateTimePicker);
```

```html
<vue-range-picker-extended></vue-range-picker-extended>
```

### UMD

```html
<vue-range-picker-extended></vue-range-picker-extended>

<script src="https://unpkg.com/vue" charset="utf-8"></script>
<script src="./dist/umd/vue-range-picker-extended.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="./dist/umd/vue-range-picker-extended.min.css">

<script type="text/javascript">
  Vue.component('vue-range-picker-extended', window.VueCtkDateTimePicker.default);
</script>
```
## Props API

| Props      | Type       | Required | Default    |
|------------|------------|----------|------------|
| v-model    | String/Int | yes     | -          |
| label      | String     | no    | Select date & time |
| hint*       | text       | no       | -         |
| error-hint** | Boolean    | no      | false     |
| color***     | String (hex) | no    | dodgerblue |
| minute-interval | Int | no    | 1    |
| formatted   | string | no    | 'llll' (momentjs format) |
| format   | string | no      | - |
| time-format   | string | no  | 'H:mm a' |
| locale   | string | no     | en |
| disable-time   | Boolean | no     | false |
| disable-date   | Boolean | no  | false |
| without-header   | Boolean | no   | false |
| id  | string | no  | CtkDateTimePicker |
| overlay | Boolean | no | true |
| enable-button-validate | Boolean | no | false |
| min-date****  | string | no  | - |
| max-date****  | string | no  | - |
| no-weekends-days | Boolean | no | false |
| auto-close | Boolean | no | false |
| without-input | Boolean | no | false |
| overlay-background | Boolean | no | false |
| disabled-dates***** | Boolean | no | [] |
| range-mode | Boolean | no | false |
| dark | Boolean | no | false |

*hint : Is a text that replaces the label/placeholder

**error-hint : When is `true` --> Input border & label are red

***color: Replace color for the hint, the borders & time selected in dropdown

****min-date & max-date : Must be `'YYYY-MM-DD'` format

*****Disabled-Dates is an Array of dates in 'YYYY-MM-DD' format (ex: `['2018-04-03', '2018-04-07', '2018-04-09']`)


## Contribution

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev
```

## Build

Build configuration is located in the `poi.config.js` file, to build just run: `npm run build`, it will build to `cjs` and `umd` directories.

## Tests

This template uses karma with chai by default, you can change test settings in poi.config.js

`npm run test`
`npm run test:watch`
`npm run test:cov`

## License

This project is licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License)

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