---
title: "Vue Date & Time Lifecycle events Example | Mobiscroll"
component: "Date & Time"
framework: "Vue"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/vue/datetime/event-hooks"
---

# Lifecycle events - Vue Date & Time demo

Vue Date and time for mobile and desktop with event hooks for custom integration and functionality. With source code. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/datetime/event-hooks)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/datepicker/datetime/event-hooks)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/datepicker/datetime/event-hooks)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/datetime/event-hooks.md), [jQuery](https://demo.mobiscroll.com/jquery/datetime/event-hooks.md), [Angular](https://demo.mobiscroll.com/angular/datetime/event-hooks.md), [React](https://demo.mobiscroll.com/react/datetime/event-hooks.md)

## Description

The date picker ships with different event hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.

While users interact with the UI events like `change`, `set`, `init` ... will be triggered.

**For a complete list of events go to the documentation** [See available lifecycle events →](https://mobiscroll.com/docs/vue/datepicker/api#events)

## What this demo shows

- Shows a wheel-style date picker examples for selecting a single date.
- **Date picker with inputs** This example opens the picker when the user focuses or clicks the input.
- **Input behavior** The picker opens at the bottom of the container over a darkened backdrop. Clicking outside the picker closes it.
- **Date selection** Separate scrollable wheels let users select the month, day, and year. The selected values appear in a central selection area, while neighboring values remain visually subdued.
- **Scrolling behavior** Users can scroll vertically through neighboring values to move between dates, including dates in other months or years.
- **Footer actions** In the input-based examples, the gray `Cancel` button discards the change, while the blue `Set` button confirms the selected date.
- **Input value** In the input-based examples, confirming a date with `Set` displays the selected value in the input using a month, day, and year format.
- **Event log** An Event log panel is shown on the left and lists the lifecycle events fired during interactions such as event creation, hover, drag, and similar actions.

## Best for

- **Lifecycle event discovery** Understanding which date picker lifecycle hooks fire during common user interactions.

## Tutorial

```js
<MbscDatepicker
  @cancel="handleCancel"
  @change="handleChange"
  @close="handleClose"
  @destroy="handleDestroy"
  @init="handleInit"
  @open="handleOpen"
  @page-change="handlePageChange"
  @page-loaded="handlePageLoaded"
  @page-loading="handlePageLoading"
  @temp-change="handleTempChange"
/>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/vue/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/vue/datepicker/api#opt-themeVariant) - option
- [`controls`](https://mobiscroll.com/docs/vue/datepicker/api#opt-controls) - option
- [`labelStyle`](https://mobiscroll.com/docs/vue/datepicker/api#opt-labelStyle) - option
- [`inputStyle`](https://mobiscroll.com/docs/vue/datepicker/api#opt-inputStyle) - option
- [`cancel`](https://mobiscroll.com/docs/vue/datepicker/api#event-onCancel) - event
- [`change`](https://mobiscroll.com/docs/vue/datepicker/api#event-onChange) - event
- [`close`](https://mobiscroll.com/docs/vue/datepicker/api#event-onClose) - event
- [`destroy`](https://mobiscroll.com/docs/vue/datepicker/api#event-onDestroy) - event
- [`init`](https://mobiscroll.com/docs/vue/datepicker/api#event-onInit) - event
- [`open`](https://mobiscroll.com/docs/vue/datepicker/api#event-onOpen) - event
- [`page-change`](https://mobiscroll.com/docs/vue/datepicker/api#event-onPageChange) - event
- [`page-loaded`](https://mobiscroll.com/docs/vue/datepicker/api#event-onPageLoaded) - event
- [`page-loading`](https://mobiscroll.com/docs/vue/datepicker/api#event-onPageLoading) - event
- [`temp-change`](https://mobiscroll.com/docs/vue/datepicker/api#event-onTempChange) - event

## Code

### SFC JS

```vue
<script setup>
import { MbscDatepicker, setOptions } from '@mobiscroll/vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

function handleCancel() {
  // Logic for cancel button click
}

function handleChange() {
  // Logic for value change
}

function handleClose() {
  // Your custom event handler goes here
}

function handleDestroy() {
  // Your custom event handler goes here
}

function handleInit() {
  // Logic running on component init
}

function handleOpen() {
  // Your custom event handler goes here
}

function handlePageChange() {
  // Your custom event handler goes here
}

function handlePageLoaded() {
  // Use it to inject custom markup & attach custom listeners
}

function handlePageLoading() {
  // Use it to load data on demand
}

function handleTempChange() {
  // Logic for temporary value change
}
</script>

<template>
  <MbscDatepicker
    :controls="['calendar']"
    label="Date"
    labelStyle="stacked"
    inputStyle="box"
    placeholder="Please select..."
    @cancel="handleCancel"
    @change="handleChange"
    @close="handleClose"
    @destroy="handleDestroy"
    @init="handleInit"
    @open="handleOpen"
    @page-change="handlePageChange"
    @page-loaded="handlePageLoaded"
    @page-loading="handlePageLoading"
    @temp-change="handleTempChange"
  />
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import { MbscDatepicker, setOptions } from '@mobiscroll/vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

function handleCancel() {
  // Logic for cancel button click
}

function handleChange() {
  // Logic for value change
}

function handleClose() {
  // Your custom event handler goes here
}

function handleDestroy() {
  // Your custom event handler goes here
}

function handleInit() {
  // Logic running on component init
}

function handleOpen() {
  // Your custom event handler goes here
}

function handlePageChange() {
  // Your custom event handler goes here
}

function handlePageLoaded() {
  // Use it to inject custom markup & attach custom listeners
}

function handlePageLoading() {
  // Use it to load data on demand
}

function handleTempChange() {
  // Logic for temporary value change
}
</script>

<template>
  <MbscDatepicker
    :controls="['calendar']"
    label="Date"
    labelStyle="stacked"
    inputStyle="box"
    placeholder="Please select..."
    @cancel="handleCancel"
    @change="handleChange"
    @close="handleClose"
    @destroy="handleDestroy"
    @init="handleInit"
    @open="handleOpen"
    @page-change="handlePageChange"
    @page-loaded="handlePageLoaded"
    @page-loading="handlePageLoading"
    @temp-change="handleTempChange"
  />
</template>
```

## Implementation notes

- Use `controls: ['date']` on an input-triggered `Datepicker` (`display: 'anchored'` by default, no explicit `display` set) with a stacked-label, box-style input.
- Wire the lifecycle hooks: `onCancel`, `onChange`, `onClose`, `onDestroy`, `onInit`, `onOpen`, `onPageChange`, `onPageLoaded`, `onPageLoading`, `onTempChange` - each handler receives `(event, inst)` in React/JS/jQuery (Angular: bound via `(onX)="..."` receiving `$event`; Vue: `@cancel`, `@change`, `@close`, `@destroy`, `@init`, `@open`, `@page-change`, `@page-loaded`, `@page-loading`, `@temp-change`). Note `onCellClick`/`onCellHoverIn`/`onCellHoverOut`/`onLabelClick` are not part of this datetime-view demo's hook list (unlike the calendar-view equivalent) since there is no month grid to hover/click cells on.
- Each hook handler fires with the described event name; the firing order and frequency reflect which user interactions and API calls trigger which hook.
- Calling `setVal(null)` programmatically fires `onChange`; calling `.open()` programmatically fires `onOpen`.
- Confirming a selection displays the value in the input using the picker's default date format.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-vue.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config vue
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config vue --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/vue/getting-started/installation

## Related demos

- Next: [Calendar systems](https://demo.mobiscroll.com/vue/datetime/gregorian-jalali-hijri.md) - Vue Date & time supporting calendar systems: Gregorian, Hijri and Jalali along with different languages and cultures.