vue-koyomi-picker
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

Vue Koyomi Picker

Software 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

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

Package Sidebar

Install

npm i vue-koyomi-picker

Weekly Downloads

6

Version

1.0.0

License

MIT

Unpacked Size

14.2 MB

Total Files

25

Last publish

Collaborators

  • akoarum