vue-koyomi-picker v1.0.0

Vue Koyomi Picker

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

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

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

Setup

Props

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:

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

Development

Starting Storybook locally

$ npm run storybook

Test

$ npm run test

Build

$ npm run build