Getting Started with the Vue TimePicker Component in Vue 3

29 Jul 20267 minutes to read

This article provides a step-by-step guide for setting up a Vite project with a JavaScript environment and integrating the Syncfusion® Vue TimePicker component using the Composition API / Options API.

The Composition API is a new feature introduced in Vue.js 3 that provides an alternative way to organize and reuse component logic. It allows developers to write components as functions that use smaller, reusable functions called composition functions to manage their properties and behavior.

The Options API is the traditional way of writing Vue.js components, where the component logic is organized into a series of options that define the component’s properties and behavior. These options include data, methods, computed properties, watchers, lifecycle hooks, and more.

Prerequisites

System requirements for Syncfusion® Vue UI components

Setup for local development

Easily set up a Vue 3 application using Vite, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools. For detailed steps, refer to the Vite installation instructions. Vite sets up your environment using JavaScript and optimizes your application for production.

Note: To create a Vue application using create-vue, refer to this documentation for more details.

To create a new Vue 3 application, run one of the following commands based on your preferred language:

Vue with JavaScript

npm create vite@latest my-app -- --template vue

Vue with TypeScript

npm create vite@latest my-app -- --template vue-ts

During the setup process, the CLI will prompt you for a few configuration options. Select the following:

  • Which linter to use? → Default ([Vue 3] babel, eslint)
  • Install with npm and start now? → Yes

Selecting Yes automatically installs the project dependencies and starts the development server.

After verifying that the application starts successfully, terminate the development server in the terminal and proceed to the next step.

Then, navigate to the project directory:

cd my-app

Add Vue TimePicker packages

To install the TimePicker packages, use the following command:

npm install @syncfusion/ej2-vue-calendars

or

yarn add @syncfusion/ej2-vue-calendars

Adding CSS reference

Themes for Syncfusion® components can be applied using CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Material 3 theme package using the following command:

npm install @syncfusion/ej2-material3-theme --save

Then add the following CSS reference to the src/App.vue file:

<style>
    @import "../node_modules/@syncfusion/ej2-material3-theme/styles/timepicker/index.css";
</style>

Adding Vue TimePicker component

The TimePicker code should be added in the src/App.vue file.

<template>
    <div class="control_wrapper">
        <ejs-timepicker></ejs-timepicker>
    </div>
</template>

<script setup>
  import { TimePickerComponent as EjsTimePicker } from '@syncfusion/ej2-vue-calendars';
</script>

<style>
    @import "../node_modules/@syncfusion/ej2-material3-theme/styles/timepicker/index.css";
</style>
<template>
    <div class="control_wrapper">
        <ejs-timepicker></ejs-timepicker>
    </div>
</template>

<script>
import { TimePickerComponent } from "@syncfusion/ej2-vue-calendars";
//Component registeration
export default {
    name: 'App',
    components: {
        "ejs-timepicker": TimePickerComponent
    }
}
</script>

<style>
    @import "../node_modules/@syncfusion/ej2-material3-theme/styles/timepicker/index.css";
</style>

Run the project

To run the project, use the following command:

npm run dev

or

yarn run dev

TimePicker initial rendering

Setting the value, min and max dates

The following example demonstrates how to set the value, min and max dates on initializing the TimePicker. Here the TimePicker allows you to select a date within the range from 9th to 15th in the month of May 2017. To know more about range restriction in TimePicker, please refer this page.

<template>
    <div id="app">
        <div class='wrapper'>
            <ejs-timepicker :min="data[0].minDate" :max="data[0].maxDate" :value="data[0].dateVal" ></ejs-timepicker>
        </div>
  </div>
</template>

<script setup>
import { TimePickerComponent as EjsTimePicker } from "@syncfusion/ej2-vue-calendars";
    const data = [{minDate: new Date("05/04/2017"), 
                  maxDate: new Date("05/16/2017"), 
                  dateVal: new Date("05/10/2017")}];
</script>

<style>
    @import "../node_modules/@syncfusion/ej2-material3-theme/styles/timepicker/index.css";
</style>
<template>
    <div id="app">
        <div class='wrapper'>
            <ejs-timepicker :min="minDate" :max="maxDate" :value="dateVal" ></ejs-timepicker>
        </div>
  </div>
</template>

<script>
import { TimePickerComponent } from "@syncfusion/ej2-vue-calendars";
//Component registeration
export default {
    name: 'App',
    components: {
        "ejs-timepicker": TimePickerComponent
    },
    data () {
        return {
            minDate : new Date("05/09/2017"),
            maxDate : new Date("05/15/2017"),
            dateVal : new Date("05/11/2017")
        }
    }
}
</script>
<style>
    @import "../node_modules/@syncfusion/ej2-material3-theme/styles/timepicker/index.css";
</style>

Setting the value, min, and max time

The following example demonstrates how to set the value, min, and max time when initializing the TimePicker. The Vue TimePicker allows you to select a time value within a range from 7:00 AM to 4:00 PM.

Setting the time format

Time format is a way of representing the time value in a different string format in the textbox and popup list. By default, the TimePicker format is based on the culture. You can also customize the format by using the format property. For more information about time format standards, refer to the Date and Time Format section.

The following example demonstrates the TimePicker component in 24-hour format with a 60-minute interval. The time interval is set to 60 minutes by using the step property.

Once the time format property is defined, it will be applicable to all the cultures.

See Also