# @spacepatate/vue-space-datetime-picker

> ## Installation setup ``` npm install --save @spacepatate/vue-space-datetime-picker ``` or

Latest version **0.2.8** (published 2020-02-23) · 0 weekly downloads

## Install

```sh
npm install @spacepatate/vue-space-datetime-picker
pnpm add @spacepatate/vue-space-datetime-picker
yarn add @spacepatate/vue-space-datetime-picker
bun add @spacepatate/vue-space-datetime-picker
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.8 |
| Published | 2020-02-23 |
| First published | 2020-02-17 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 1.4 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | spacepatate |
| Keywords | vuejs, vue, datetime, date, time, datetime-picker, timepicker, time-picker |

## Links

- npm: https://www.npmjs.com/package/@spacepatate/vue-space-datetime-picker
- npm.io page: https://npm.io/package/@spacepatate/vue-space-datetime-picker

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.4

## 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.2.8 (latest) — 2020-02-23
- 0.2.7 — 2020-02-23
- 0.2.6 — 2020-02-23
- 0.2.5 — 2020-02-23
- 0.2.4 — 2020-02-23
- 0.2.2 — 2020-02-23
- 0.2.1 — 2020-02-23
- 0.2.0 — 2020-02-23
- 0.1.6 — 2020-02-20
- 0.1.5 — 2020-02-17
- 0.1.4 — 2020-02-17
- 0.1.3 — 2020-02-17
- 0.1.2 — 2020-02-17
- 0.1.1 — 2020-02-17
- 0.1.0 — 2020-02-17

## README

# space-datetime-picker

## Installation setup
```
npm install --save @spacepatate/vue-space-datetime-picker
```
or 

```
yarn add @spacepatate/vue-space-datetime-picker
```

## Register

```
import { SpaceDatetimePicker, SpaceDaterangePicker }  from '@spacepatate/vue-space-datetime-picker';
import '@spacepatate/vue-space-datetime-picker/dist/vue-space-datetime-picker.css';

export default {
  name: 'App',
  components: {
    SpaceDatetimePicker,
    SpaceDaterangePicker,
  },

```
## Usage

### Date picker

```
<space-datetime-picker v-model="date"></space-datetime-picker>
```

![minimal](https://raw.githubusercontent.com/spacepatate/vue-space-datetime-picker/master/cap1.png)

#### With time

```
<SpaceDatetimePicker v-model="datetime" format="DD/MM/YYYY HH:mm:ss" :showTime="true"></SpaceDateTimePicker>
```

![time select](https://raw.githubusercontent.com/spacepatate/vue-space-datetime-picker/master/cap3.png)


#### Select months
![month select](https://raw.githubusercontent.com/spacepatate/vue-space-datetime-picker/master/cap2.png)

#### Select year
![year select](https://raw.githubusercontent.com/spacepatate/vue-space-datetime-picker/master/cap4.png)

### Date range picker

```
<SpaceDaterangePicker v-model="rangeDatetimes"></SpaceDaterangePicker>
```
![range dates select](https://raw.githubusercontent.com/spacepatate/vue-space-datetime-picker/master/cap5.png)

### SpaceDatetimePicker Parameters

Parameter | Type | Default | Description
--------- | ---- | ------- | -----------
v-model (*required*) | Date `Date` | - | Date object
placeholder | `String` | `''` | placeholder for default input field
format | `String` | `''` | format to display in default input field, the default display format is YYYY-MM-DD
locale | `String` | `undefined` | BCP47 locales, ex: fr-FR, en-BR, en-US...
showTime | `Boolean` | `false` | show time input in date picker
hour12 | `Boolean` | `false` | show time in 12 hours format
weekday | `String` | `narrow` | display week day in long | short | narrow
showHome | `Boolean` | `false` | home icon button allow to return back to current datetime
disabled | `Boolean` | `false` | disabled all inputs
stardingDay | `Number` | `1` | define the first day of week, 0 is sunday, 1 for monday...

### SpaceDaterangePicker parameters

Parameter | Type | Default | Description
--------- | ---- | ------- | -----------
v-model (*required*) | `Date` Array | - | Array of Date object
placeholder | `String` Array | - | Array of strings, ex: ['start date', 'end date']
format | `String` | `''` | format to display in default input field, the default display format is YYYY-MM-DD
locale | `String` | `undefined` | BCP47 locales, ex: fr-FR, en-BR, en-US...
weekday | `String` | `narrow` | display week day in long | short | narrow
disabled | `Boolean` | `false` | disabled all inputs
stardingDay | `Number` | `1` | define the first day of week, 0 is sunday, 1 for monday...

### Display format

A valid datetime format is combinated of 'YYYY', 'MM', 'DD' for date and 'HH', 'mm', 'ss' for a valid time

for example MM/DD/YYYY HH:mm:ss is valid for dates like 02/18/2020 00:30:30

### Default slot

A default slot is available to replace the default input field

```
<vue-space-datetime-picker v-model="date">
  <div>custom input</div>
</vue-space-datetime-picker>
```

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