Working Hours Selector

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

Dependencies

• Repeater
• Custom Checkbox
• Time Picker

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 offset-5@sm"> <!-- 👈 -->
  <ul class="js-repeater__list">
    <li class="col-4 col-5@sm">
      <!-- ... -->
    </li>

    <li class="whs__slot col-8 col-7@sm 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.

Categories

• Ecommerce > Form Elements
• Forms > Form Elements

Bug report & feedback

Component Github page ↗