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>

🍔 Props

☕ Buy me a coffee

If you like this component and like my work then please make some contribution in below link. https://www.buymeacoffee.com/ashuab

🤟🏽 License

MIT

📓 Contributing

Contributions are always welcome!

Please adhere to this project's code of conduct.

🧸 Appendix

Feel free to use (https://github.com/Ashutosh012/vue3-time-range.git) it in your project, report bugs and make PR 👏🏽.

Upcoming task

1. Write articles on medium about vue3 npm package and how to create npm package
2. Design Improvements and remove tailwind
3. Fix typescript errors
4. Integrate with datepicker
5. SSR compatible
6. Make it compatible for all javascript frameworks