# vue-koyomi-picker

> [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE)

Latest version **1.0.0** (published 2022-09-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-koyomi-picker
pnpm add vue-koyomi-picker
yarn add vue-koyomi-picker
bun add vue-koyomi-picker
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-09-01 |
| First published | 2022-09-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 13.5 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Kenty Akoarum |
| Maintainers | akoarum |
| Keywords | vue, vue3, nuxt, date-picker, datetime-picker, picker |

## Links

- npm: https://www.npmjs.com/package/vue-koyomi-picker
- Repository: https://github.com/akoarum/vue-koyomi-picker
- Homepage: https://github.com/akoarum/vue-koyomi-picker#readme
- Issues: https://github.com/akoarum/vue-koyomi-picker/issues
- npm.io page: https://npm.io/package/vue-koyomi-picker

## Dependencies (6)

- [uuid](https://npm.io/package/uuid.md) ^8.3.2
- [@mdi/js](https://npm.io/package/@mdi/js.md) ^7.0.96
- [date-fns](https://npm.io/package/date-fns.md) ^2.29.1
- [inter-ui](https://npm.io/package/inter-ui.md) ^3.19.3
- [typescript](https://npm.io/package/typescript.md) ^4.7.4
- [@vue/compiler-sfc](https://npm.io/package/@vue/compiler-sfc.md) ^3.2.37

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

- 1.0.0 (latest) — 2022-09-01

## README

# Vue Koyomi Picker

[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE)

Simply datetime picker for Vue3.  
Supported date mode and datetime mode.

> `Koyomi` is Japanese for calendar.

## Demo

Please see the Storybook below.

https://dark-cloud-7478.spearly.app/

## Installation

### Install

```
// npm
$ npm install --save vue-koyomi-picker

// yarn
$ yarn add vue-koyomi-picker
```

### Register

```js
import { createApp } from 'vue'
import { VueKoyomiPicker } from 'vue-koyomi-picker'
import 'vue-koyomi-picker/dist/style.css'

const app = createApp()

app.component('datetime-picker', VueKoyomiPicker)
```

## Usage

### Minimal

```html
<datetime-picker v-model="date">
  <template #activator="{ on, formattedValue }">
    <input :value="formattedValue" type="text" @focus="on" />
  </template>
</datetime-picker>
```

## Setup

### Props
| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| v-model (modelValue) *Required | `Date | null` | - | Date time. |
| to | `Date` | - | Specifies the maximum date and time that can be selected; the picker will not be able to select any later date and time. |
| from | `Date` | - | Specifies the minimum date and time that can be selected; the picker will not be able to select earlier dates and times. |
| defaultDate | `Date` | `new Date()` | Specify the date and time that is selected when the picker is opened. |
| format | `string` | `yyyy/MM/dd HH:mm` | Specifies the format of the string.<br />See `format` in date-fns documentation. |
| onlyDate | `boolean` | - | Hide Time Picker and enabled Date Picker only. |
| disabledDates | `Date[]` | - | Specify dates to disable. |
| disabledDays | `(0 | 1 | 2 | 3 | 4 | 5 | 6)[]` | - | Specify days of the week to disable. |
| disabledHours | `number[]` (0-23) | - | Specify hours to disable. |
| stepMinutes | `number` (0-59) | - | Specify the number of minute steps. |
| firstDay | `0 | 1 | 2 | 3 | 4 | 5 | 6` | 0 | Specify the first day of the week.<br />It is not linked to dayNames and needs to be reordered accordingly. |
| dayNames | `string[]` | `['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']` | Specify the name of the day of the week to be displayed in the calendar.<br />It is not linked to firstDay and needs to be reordered accordingly. |
| phrases | `Object` | `{ today: 'Today', lastMonth: 'Last month', followingMonth: 'Following month', ok: 'OK' }` | Specify phrases to be used for buttons, etc. |
| teleportTo | `string` | `body` | Specifies the teleport destination.<br />See Vue3 documentation for `teleport` . |

### Slots

#### `activator`
Specifies the element that activates datetime picker or displays its value.
`on` and `formattedValue` are passed to `activator`.
`on` allows datetime picker to be displayed.
`formattedValue` is the formatted value of `v-model(modelValue)`.

Example of using a button:

```html
<datetime-picker v-model="date">
  <template #activator="{ on, formattedValue }">
    <button type="button" @click="on">
      {{ formattedValue }}
    </button>
  </template>
</datetime-picker>
```

### Styles

The colors are specified in CSS Variables and can be changed by overriding the following with your CSS.

| Variable Name | Default |
| :--- | :--- |
| `--vue-koyomi-primary` | `#2a85ff` |
| `--vue-koyomi-primary-dark` | `#1369db` |
| `--vue-koyomi-primary-light` | `#e4effc` |
| `--vue-koyomi-black` | `#272526` |
| `--vue-koyomi-gray` | `#a6a9a7` |
| `--vue-koyomi-gray-border` | `#e2e5f1` |
| `--vue-koyomi-gray-light` | `#f6f7f9` |
| `--vue-koyomi-white` | `#fff` |


## Development

### Starting Storybook locally

```
$ npm run storybook
```

### Test

```
$ npm run test
```

### Build

```
$ npm run build
```

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