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.

holiday-hours-select-mode-with-errors

How to make use of it:

Installation:

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';

Vue.use(BusinessHours);

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="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
<script src="https://unpkg.com/vue-business-hours"></script>

business-hours-with-spanish-translation-24h-time-format

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

fireworks-js

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)…

Side-Navigation-Menu-With-Dropdowns-jSide

[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…

Searchable-Select-Dropdown

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…

country-dropdown-with-flags

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…

Autocomplete-and-Typeahead-Javascript-Library

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

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…