Add a Time Picker to a Vue App with vue-timeselector

To make adding a time picker easier, we can use the vue-timeselector package.

First, we install it by running:

npm i vue-timeselector

Then we can use it by registering the component and putting it in the template:

<template>
  <div id="app">
    <timeselector v-model="time"></timeselector>
    <p>{{time}}</p>
  </div>
</template>

<script>
import Timeselector from "vue-timeselector";

export default {
  components: {
    Timeselector
  },
  data() {
    return {
      time: undefined
    };
  }
};
</script>

v-model binds the time property to the timeselector‘s value.

We can also use the placeholder and required props like a regular input component:

<template>
  <div id="app">
    <timeselector v-model="time" placeholder="Select a time" required></timeselector>
    <p>{{time}}</p>
  </div>
</template>

<script>
import Timeselector from "vue-timeselector";

export default {
  components: {
    Timeselector
  },
  data() {
    return {
      time: undefined
    };
  }
};
</script>

We can also add the disabled prop to disable interactivity:

<template>
  <div id="app">
    <timeselector v-model="time" disabled></timeselector>
    <p>{{time}}</p>
  </div>
</template>

<script>
import Timeselector from "vue-timeselector";

export default {
  components: {
    Timeselector
  },
  data() {
    return {
      time: undefined
    };
  }
};
</script>

The date format can be customized with the returnFormat prop:

<template>
  <div id="app">
    <timeselector v-model="time" returnFormat="HH" @formatedTime="formatTime"></timeselector>
    <p>{{formattedTime}}</p>
  </div>
</template>

<script>
import Timeselector from "vue-timeselector";

export default {
  components: {
    Timeselector
  },
  data() {
    return {
      time: undefined,
      formattedTime: undefined
    };
  },
  methods: {
    formatTime(time) {
      this.formattedTime = time;
    }
  }
};
</script>

We pass in the formatTime method which has the formatted time set as the value of the time parameter.

Then we set that value to this.formattedTime and display it.

returnFormat sets the format of the formatted time.

The interval of the hours and minutes can be changed with the interval prop:

<template>
  <div id="app">
    <timeselector v-model="time" displaySeconds :interval="{h:2, m:1, s:10}"></timeselector>
    <p>{{formattedTime}}</p>
  </div>
</template>

<script>
import Timeselector from "vue-timeselector";

export default {
  components: {
    Timeselector
  },
  data() {
    return {
      time: undefined
    };
  }
};
</script>

We set the interval prop to an object, h is for hour the hour interval, m for minute, and s for seconds.

Now we see that the hour picker only displays the even hours.

We can also disable some choices from the time picker with the disabled prop:

<template>
  <div id="app">
    <timeselector v-model="time" displaySeconds :disable="{h:[1, 5], m:null, s:[10,20,25]}"></timeselector>
    <p>{{time}}</p>
  </div>
</template>

<script>
import Timeselector from "vue-timeselector";

export default {
  components: {
    Timeselector
  },
  data() {
    return {
      time: undefined
    };
  }
};
</script>

We have the disable prop with an object to disable hour 1 and 2

vue-timeselector also provides slots to let us change the labels display.

There’s the hours, minutes, seconds, ampm and clear-ico slots to let us change the text of those labels.

For example, we can write:

<template>
  <div id="app">
    <timeselector v-model="time">
      <template slot="hours">
        <span>Hours</span>
      </template>
    </timeselector>
    <p>{{time}}</p>
  </div>
</template>

<script>
import Timeselector from "vue-timeselector";

export default {
  components: {
    Timeselector
  },
  data() {
    return {
      time: undefined
    };
  }
};
</script>

to set the hours heading to Hours.

vue-timeselector is an easy to use package to let us add a time picker to our Vue app.

It supports various formatting and customization options.