@bybitter/vue3-timeselect

The most complete timeselect solution for Vue 3

Features

• Range time picker
• Custom v-model
• Dark and light theme
• SSR support
• Highly configurable
• Accessible
• Included type definitions

Install

# npm
npm install @bybitter/vue3-timeselect

# yarn
yarn add @bybitter/vue3-timeselect

# pnpm
pnpm add @bybitter/vue3-timeselect

# bun
bun add @bybitter/vue3-timeselect

Import and register component

Global

import { createApp } from 'vue';
import App from './App.vue';

import VueTimeSelect from '@bybitter/vue3-timeselect';
import '@bybitter/vue3-timeselect/dist/main.css';

const app = createApp(App);
app.component('VueTimeSelect', VueTimeSelect);

Local

<template>
  <VueTimeSelect v-model:startTime="startTime" v-model:endTime="endTime" />
</template>

<script setup>
  import { ref } from 'vue';
  import VueTimeSelect from '@bybitter/vue3-timeselect';
  import '@bybitter/vue3-timeselect/dist/main.css';

  const startTime = ref("10:00")
  const endTime = ref("19:00")
</script>

Supporting the project

As you may know, maintaining an open-source project is a very time-consuming job. Your support is very appreciated ❤️

Please ⭐️ this repository if you like the component!

You can also make a financial contribution via sponsoring this project or one time donation. Become a sponsor

Special thanks to our sponsors 🙏

Contributors

Thanks to all people who contributed to the project 🙏

Versioning

This project follows SemVer specification

License

Copyright © 2021-present ByB1tter

MIT