runyasak / v-digital-time-picker

Digital Time Picker for Vuetify

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Buy Me A Coffee

Build Status NPM version NPM downloads License

🚀 VDigitalTimePicker

Digital Time Picker for Vuetify.

Installation

Insall dependencies

npm install v-digital-time-picker

For yarn

yarn add v-digital-time-picker

Quick Start

Implement VDigitalTimePicker as plugin

import VDigitalTimePicker from 'v-digital-time-picker'

Vue.use(VDigitalTimePicker)

You can import as individual component

import { VDigitalTimePicker } from 'v-digital-time-picker'

Vue.component('v-digital-time-picker', VDigitalTimePicker)

Basic Usage

You can implement on Vue template.

<template>
  <v-app>
    <v-container style="max-width: 600px;">
      <v-digital-time-picker
        v-model="timeValue"
        rounded
        filled/>
    </v-container>
  </v-app>
</template>

<script>
export default {
  data () {
    return {
      timeValue: ''
    }
  }
}
</script>

You can use with vee-validate

<template>
  <v-app>
    <v-container>
      <validation-provider
        ref="timePicker"
        v-slot="{ errors }"
        rules="required">
        {{ errors }}
        <v-digital-time-picker
          v-model="timeValue"
          rounded
          filled/>
      </validation-provider>
    </v-container>
  </v-app>
</template>

VDigitalTimePicker extends from VTextField by transparent wrappers.

Props

Name Type Required Description
value string No Binding value of as time format (e.g. '11:00')

Events

Name Description Parameters
value Trigger when value is changed string

Contrubutation

If you want to improve or add any feature, you can submit as pull request.

npm install

npm run serve

Run unit tests

npm run test:unit

Lints and fixes files

npm run lint

About

Digital Time Picker for Vuetify

License:MIT License


Languages

Language:Vue 51.1%Language:TypeScript 21.3%Language:JavaScript 17.4%Language:HTML 10.3%