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

Name	Type	Default	Description
v-model (modelValue) *Required	`Date	null`	-
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. 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
disabledHours	number[] (0-23)	-	Specify hours to disable.
stepMinutes	number (0-59)	-	Specify the number of minute steps.
firstDay	`0	1	2
dayNames	string[]	['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']	Specify the name of the day of the week to be displayed in the calendar. 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. 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:

<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