Vue3-time-range NPM

vue3-time-range

Vue3 Time Range is fully customizable component that will help you to use time based on ranges. It will super helpful in appointment apps. for e.g doctor have 2 ranges of time in a day. One is 10 AM to 1 PM and second is 04 PM to 06 PM and for that you can't enable whole day time in time picker otherwise user will pick any time for the appointment. This plugin is gonna fix that issue and helpful to book an appointment through any website easily. It is built with Vue 3.x, composition API and typescript.

⚙️ Installation

To install the latest stable version:

npm i vue3-time-range

📖 Usage

1/3. Register as a Vue component globally

//  main.js or main.ts
import { createApp } from 'vue'
import App from './App.vue'

import TimeRange from "vue3-time-range"
import "vue3-time-range/dist/style.css"

const app = createApp(App)

app.use(TimeRange);

app.mount('#app')

2/3. Use the registered component in your Vue template

<template>
  <div>
    <TimeRange
    v-model="timeValue"
    :use12HourFormat="false"
    :firstRangeTime="{start:'10:00', end:'01:00'}"
    :secondRangeTime="{start:'16:00', end:'18:00'}"
    :slotGap="30"
    :timeZone="'Asia/Kolkata'"
    ></TimeRange>
  </div>
</template>