Title: Designing a Vue.js Component for Time Interval Selection

Introduction:

Creating user-friendly components for time-related inputs is a common requirement in web development. In this comprehensive guide, we’ll walk through the process of designing a Vue.js component that allows users to select time intervals of the day. This component will offer a visually appealing and intuitive way for users to choose specific time ranges.

Table of Contents

Understanding the Requirement:

When dealing with time intervals, it’s essential to consider the user experience. A well-designed time interval selection component should provide a clear representation of various time segments within a day and allow users to easily pick the desired intervals.

Setting Up the Vue Project:

Begin by creating a new Vue project using the Vue CLI. If you haven’t installed it, run:

npm install -g @vue/cli

Create a new project:

vue create vue-time-interval-picker
cd vue-time-interval-picker

Designing the TimeIntervalPicker Component:

Create the TimeIntervalPicker.vue component:

<template>
  <div class="time-interval-picker">
    <div v-for="interval in timeIntervals" :key="interval.id" @click="selectInterval(interval)">
      {{ interval.label }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeIntervals: [
        { id: 1, label: 'Morning', start: '06:00', end: '12:00' },
        { id: 2, label: 'Afternoon', start: '12:00', end: '18:00' },
        { id: 3, label: 'Evening', start: '18:00', end: '24:00' },
      ],
      selectedInterval: null,
    };
  },
  methods: {
    selectInterval(interval) {
      this.selectedInterval = interval;
      // Additional logic can be added, e.g., emitting an event or updating a parent component
    },
  },
};
</script>

<style scoped>
.time-interval-picker {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.time-interval-picker div {
  flex: 1;
  text-align: center;
  padding: 10px;
  background-color: #3498db;
  color: #fff;
  border-radius: 5px;
  margin: 0 5px;
}

.time-interval-picker div:hover {
  background-color: #2980b9;
}
</style>

Using the TimeIntervalPicker component in App.vue:

<template>
  <div id="app">
    <TimeIntervalPicker />
    <div v-if="selectedInterval">
      Selected Interval: {{ selectedInterval.label }} ({{ selectedInterval.start }} - {{ selectedInterval.end }})
    </div>
  </div>
</template>

<script>
import TimeIntervalPicker from './components/TimeIntervalPicker.vue';

export default {
  components: {
    TimeIntervalPicker,
  },
  data() {
    return {
      selectedInterval: null,
    };
  },
};
</script>

<style>
#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

#app div {
  margin-top: 20px;
}
</style>

Explanation of the TimeIntervalPicker Component:

The template section contains a container displaying time intervals as clickable segments.
The script section defines an array of time intervals, each with a label, start, and end time. The selectInterval method updates the selectedInterval property.
The scoped styles define the appearance of the time intervals, providing a visually appealing and responsive design.

Running the Application:

Run the following commands to see the time interval picker in action:

npm install
npm run serve

Visit http://localhost:8080 in your browser to interact with the time interval picker component.

Complete implementation of Vue.js component to select the time intervals of the day.

Vue-time-ranges-picker

Vue.js component to select the time intervals of the day

Built with SVG and pointer events.

npm install vue-time-ranges-picker

Using

<template>
  <div>
    <div class="time-picker-wrapper">
      <VueTimeRangesPicker
        :value="ranges"
        @change="handleRangesChange"
      />
    </div>
  </div>
</template>

<script>
import VueTimeRangesPicker from 'vue-time-ranges-picker';

export default {
  components: {
    VueTimeRangesPicker
  },

  data() {
    return {
      ranges: [
        {
          startTime: '00:00',
          endTime: '03:00',
          scaleColor: 'violet',
        },
        {
          startTime: '03:00',
          endTime: '06:00',
          scaleColor: 'yellow',
        },
        {
          startTime: '06:00',
          endTime: '00:00',
          scaleColor: 'aquamarine',
        }
      ]
    }
  }
}
</script>

<style>
.time-picker-wrapper {
  width: 300px;
}
</style>

Props

value :arrayOf(object)

The array which contains default intervals of time with scale color for each of them.

isTwelfthMode :boolean, default: false

Set this value to true if you want to work with picker in twelfth format. If it is true, data should be in twelfth format too.

stepOfMoving :number, default: 0.5

This param controls the minimum hours step for moving.

extraPointerRadius :number, default: 70

The user can’t always get directly to the pointer to start the movement. The parameter is used to indicate an additional, invisible radius for the pointer, which, when hit, begins the movement.

viewOptions :object, default:

{
  isShowChosenTime: true,
  isShowQuartersText: true,
  isShowHoursMarks: true,
  chosenTimeColor: 'grey',
  pointerColor: 'white',
  activePointerColor: 'rgba(240, 240, 240, 0.9)',
  pointerRadius: 6,
  activePointerRadius: 5.5,
  circleStrokeWidth: 8,
  hoursMarksColor: 'grey',
  quarterTextColor: 'grey',
}

Project setup

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Demo

Full project