# @pderas/vue2-date-selector

> A vue 2 component for selecting dates

Latest version **2.0.4** (published 2019-02-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install @pderas/vue2-date-selector
pnpm add @pderas/vue2-date-selector
yarn add @pderas/vue2-date-selector
bun add @pderas/vue2-date-selector
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.4 |
| Published | 2019-02-25 |
| First published | 2018-01-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 159.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Maintainers | codymoorhouse, drewpderas, reed-jones |
| Keywords | vue2, vue2js, vue2dateselector, vue2date-selector, vue2-date-selector, date-selector, calendar-picker |

## Links

- npm: https://www.npmjs.com/package/@pderas/vue2-date-selector
- Repository: https://github.com/PDERAS/vue2-date-selector
- Homepage: https://github.com/PDERAS/vue2-date-selector#readme
- Issues: https://github.com/PDERAS/vue2-date-selector/issues
- npm.io page: https://npm.io/package/@pderas/vue2-date-selector

## 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

- 2.0.4 (latest) — 2019-02-25
- 2.0.3 — 2018-12-11
- 2.0.2 — 2018-11-23
- 2.0.1 — 2018-11-23
- 2.0.0 — 2018-09-25
- 1.4.0 — 2018-07-27
- 1.3.4 — 2018-05-17
- 1.3.3 — 2018-05-17
- 1.3.2 — 2018-05-17
- 1.3.1 — 2018-05-04
- 1.3.0 — 2018-05-04
- 1.2.0 — 2018-04-30
- 1.1.2 — 2018-03-14
- 1.1.1 — 2018-03-14
- 1.1.0 — 2018-03-14
- … 3 more at https://npm.io/package/@pderas/vue2-date-selector/versions

## README

# Vue Date Selector
A collection of vue 2 components for selecting a date. `<date-selector>` provides 3 input boxes for an easy way to select the day, month, and year. `<calendar-picker>` displays a calendar to select an individual date, or a start and end date.

## How to initialize Vue Date Selector
Vue date selector is built as a vue plugin. It can be initialized just as the Vue documentation states.

```javascript
import DateSelector from "@pderas/vue2-date-selector";

// this provides access to both <date-selector /> and <calendar-picker /> components globally
Vue.use(DateSelector);
```
## Usage

#### `<date-selector />` Creation
Vue date selector is easily created, and has many properties that can be changed.

```HTML
<date-selector></date-selector>

```

## `<date-selector />` Properties
| Property      | Required | Type             | Default                    | Description                                                             |
|---------------|:--------:|------------------|----------------------------|-------------------------------------------------------------------------|
| value         | false    | String&#124;Date | Date()                     | Value for the input, can be used with v-model                           |
| formatFn      | false    | Function         | (value) => {return value } | Formats the labels based on the function provided                       |
| amountOfYears | false    | Number           | 20                         | The amount of years to show in the date selector, from the current year |
| amountOfYearsAfter | false    | Number           | 0                         | The amount of years to show in the date selector, from after the current year |
| disabled      | false    | Object           | null                       | Specifies dates to disable from being selected in the picker            |
| disabledInput | false    | Boolean          | false                      | Disables the inputs on the date selector                                |

### Disabled Dates
The disabled object contains two potential keys for disabling ranges of dates.

* `to` This is used for disabling dates up to a specific date.
* `from` This is used for disabled dates after a specific date.

Currently only `to` or `from` can be used separately. They cannot be used together. The value can be either a valid date string or a date object.

#### Styling
Styling is currently limited, but can be expanded in the future.

#### `<calendar-picker />` Creation
Vue calendar picker is easily created, and has many properties that can be changed.

```HTML
<calendar-picker v-model='dates' />
```

### `<calendar-picker />` Properties
| Property | Required | Type | Default | Description |
|--|--|--|--|--|
| value | true | Object | -- | passed in the form of either `{ day: null }` for single date picking, or `{ start: null, end: null }` for multi day picking |
| month | false | Number | `new Date().getMonth() + 1` | _**ones based**_ month to be displayed (Jan = 1, Dec = 12) |
| year | false | Number | `new Date().getFullYear()` | year to be displayed |
| multiDaySelect | false | Boolean | True | Allow either single, or multi day selection |
| next | false | String | `Next` | string to be displayed for next month button |
| prev | false | String | `Prev` | string to be displayed for previous month button |
| highlighted | false | Object | `{}` | days that should be highlighted on load. can include tooltip information to be displayed on hover. should be passed in the format `{ [dd-MM-yyyy]: { name: 'My Tooltip Info' }}`. for example:
```js
{
    "28-09-2018": {
        name: "last friday in september"
    },
    "01-10-2018": {
        name: "first monday in october"
    }
}
```

### Misc
Instead of providing a `value` prop, `v-model` can be used to make use of two way data binding. Similarly, the `month` and `year` props can be bound using the `.sync` modifier.
```html
<!-- sync example -->
<calendar-picker
    v-model='selectedDates'
    :month.sync='month'
    :year.sync='year' />
```


### Styling
All elements are namespaced starting with `.cal` and are written at the root level for the easiest customization. The calendar will grow/shrink width in relation to the surrounding div, and the squares height can be easily overwritten using `.cal-day { height: 50px; }`. The most common styles to be overridden are likely to be the background colors of: `.cal-header, .cal-inactive, .cal-today, .cal-highlighted, .cal-clicked, .cal-faded`.

![calendar-picker component](https://raw.githubusercontent.com/PDERAS/vue2-date-selector/calendar-picker/assets/calendar-picker.png)

## License
This project is covered under the MIT License. Feel free to use it wherever you like.

---
_Source: https://npm.io/package/@pderas/vue2-date-selector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._