Vue Component for Selecting Business Hours In Admin Panel

Business Hours is the Vue component for defining the hours worked in the admin panel. Option to use an <input> and <datalist> script component with an “autocomplete” function for more flexibility in setting working hours.

or the <select> component to limit options to preset times in 15, 30, and 60-minute increments.


How to make use of it:


npm install vue-business-hours

1. Then in main.js or some other entry point register as a plugin.

import BusinessHours from 'vue-business-hours';


2. or register as an item.

import BusinessHours from 'vue-business-hours';

Vue.component('BusinessHours', BusinessHours);

3. You can also add this component directly to an HTML page with a <script> tag with Vue and Moment.js.

<script src="[email protected]/dist/vue.js"></script>
<script src="[email protected]/moment.min.js"></script>
<script src=""></script>


set open/close hours in admin panel, Vue Business Hours Plugin/Github

See Demo And Download

Official Website(sbarry50): Click Here

This superior jQuery/javascript plugin is developed by sbarry50. For extra advanced usage, please go to the official website.

Related Posts


A Simple Fireworks Animation With JavaScript | fireworks-js

fireworks-js is a JavaScript library that adds configurable fireworks animations with sound effects to your webpage. Features 🔥 Zero dependencies ⚙️ Flexible configuration 📦 Lightweight (~3.0kB gzipped)…


[Off-Canvas] Simple and Clean Side Navigation Menu With Dropdowns | jSide Menu

JSide menu is a well-designed, simple, and clean side-scrolling menu with dropdown menus. This plugin creates a sticky hamburger button at the top of the page that…


A Simple Searchable Select Dropdown Plugin | jQuery Select Search

Simple jQuery search on the selection options plugin for your website. Next, there is a checkbox replacement plugin that refines and beautifies the original selection element with…


A Quick jQuery-Based Country Picker With Flags | Country Select JS

Country Select JS is a jQuery plugin to select a country, based on the international phone input plugin. Adds a flag dropdown to any input, which lists…


Simple and Fast Autocomplete and Typeahead Javascript Library | autoComplete.js

autoComplete.js is a simple, pure, and incrementally designed JavaScript library for speed, high versatility, and seamless integration with a wide variety of projects and systems. Features Pure…


Bootstrap Notification Message Alert Plugin with jQuery

BootstrapMsg is a jQuery plugin for displaying messages with Bootstrap alert classes to generate hierarchical in-page navigation for an extended webpage sectioned by heading components. Using Bootstrap…