⚡️ Download 385 HTML, CSS, JS Components and 9 templates for $129 - Limited time offer ⏳

Projects

Progress value is 30%

Working Hours Selector

A widget to select the daily opening and closing hours of a store.

View Demo

Dependencies

All components are based on CodyFrame.

If you're using this component, you should also include the SCSS/JS of the following components:

How To

This component allows the user to select the working hours of a business. Each day can be marked as open/close and have multiple opening hours slots. It could be integrated into a shopping CMS.

Input Repeater #

To create multiple hours slots, we use the Repeater component. The data-repeater-class attribute is used to add custom classes to the repeated element. Make sure the offset-{X} class included in the data-repeater-class attribute matches the col-{Y} class of the .whs__slot element (X + Y should be equal to 12 - the tot columns number).

<li 
  class="whs__item js-whs__item js-repeater" 
  data-repeater-class="whs__slot--added offset-4 [email protected]"> <!-- 👈 -->
  <ul class="js-repeater__list">
    <li class="col-4 [email protected]">
      <!-- ... -->
    </li>

    <li class="whs__slot col-8 [email protected] js-repeater__item"> <!-- 👈 -->
      <!-- ... -->
    </li>
  </ul>
</li>

Interactive Elements #

Clicking anywhere on the .js-whs__item element will check/uncheck the selected day. When a day is selected, additional interactive elements are shown (i.e., the time selector and the add/remove buttons). Make sure to add the .js-whs__int-element to these elements, otherwise clicking on them will toggle the day selection.

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.