---
title: "Vue Range Event Hooks Example | Mobiscroll"
component: "Range"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/range/event-hooks"
---

# Event Hooks - Vue Range demo

Attach custom logic to the Vue date range picker using lifecycle event hooks — onChange, onSet, and onInit fire on user interaction. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/range/event-hooks)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/datepicker/range/event-hooks)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/datepicker/range/event-hooks)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/range/event-hooks.md), [jQuery](https://demo.mobiscroll.com/jquery/range/event-hooks.md), [Angular](https://demo.mobiscroll.com/angular/range/event-hooks.md), [React](https://demo.mobiscroll.com/react/range/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 date range picker example for selecting a start and end date from a monthly calendar.
- **Date range picker with inputs** This example opens the range picker when the user focuses or clicks a standard input. Below the input there is a Clear and a Show button, the first clears the selected range and the second button opens the range picker.
- **Input behavior** The range picker opens at the bottom of the container over a darkened backdrop. Clicking outside the picker closes it. 
- **Start and end inputs** Clickable inputs appear above the calendar header. The active input has a white background, while the inactive input has a gray background. A clear button appears after a range is selected.
- **Header navigation** The month and year label in the upper-left corner opens the month and year picker. The previous and next arrow buttons on the right navigate between months.
- **Month view** A fixed weekday header shows abbreviated day names from Sunday through Saturday, with dates arranged in a grid below.
- **Month navigation** Drag the calendar left or right to move between months.
- **Day cell states** Hovering over a day highlights its number with a gray background. The first selected day becomes the range start, and the second becomes the range end. Selected days are highlighted in blue. The current date is highlighted by default and remains blue when another date is selected.
- **Adjacent months** Dates from the previous and next months use a muted style. Selecting one navigates to its corresponding month.
- **Footer actions** In the input-based examples, the gray `Cancel` button discards the change, while the blue `Set` button confirms the selected date range. Until a range is selected, the `Set` button remains inactive.
- **Input value** In the input-based examples, confirming a date with `Set` displays the selected range 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 range picker lifecycle hooks fire during common user interactions.

## Tutorial

```js
<MbscDatepicker
  @active-date-change="handleActiveDateChange"
  @cancel="handleCancel"
  @cell-click="handleCellClick"
  @cell-hover-in="handleCellHoverIn"
  @cell-hover-out="handleCellHoverOut"
  @change="handleChange"
  @close="handleClose"
  @destroy="handleDestroy"
  @init="handleInit"
  @label-click="handleLabelClick"
  @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
- [`select`](https://mobiscroll.com/docs/vue/datepicker/api#opt-select) - option
- [`labelStyle`](https://mobiscroll.com/docs/vue/datepicker/api#opt-labelStyle) - option
- [`inputStyle`](https://mobiscroll.com/docs/vue/datepicker/api#opt-inputStyle) - option
- [`active-date-change`](https://mobiscroll.com/docs/vue/datepicker/api#event-onActiveDateChange) - event
- [`cancel`](https://mobiscroll.com/docs/vue/datepicker/api#event-onCancel) - event
- [`cell-click`](https://mobiscroll.com/docs/vue/datepicker/api#event-onCellClick) - event
- [`cell-hover-in`](https://mobiscroll.com/docs/vue/datepicker/api#event-onCellHoverIn) - event
- [`cell-hover-out`](https://mobiscroll.com/docs/vue/datepicker/api#event-onCellHoverOut) - 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
- [`label-click`](https://mobiscroll.com/docs/vue/datepicker/api#event-onLabelClick) - 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 handleActiveDateChange() {
  // Logic for the active date change
}

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

function handleCellClick() {
  // Logic for event click
}

function handleCellHoverIn() {
  // Logic for handling cell hover in
}

function handleCellHoverOut() {
  // Logic for handling cell hover out
}

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 handleLabelClick() {
  // Logic for label click
}

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']"
    select="range"
    label="Range"
    labelStyle="stacked"
    inputStyle="outline"
    placeholder="Please select..."
    @active-date-change="handleActiveDateChange"
    @cancel="handleCancel"
    @cell-click="handleCellClick"
    @cell-hover-in="handleCellHoverIn"
    @cell-hover-out="handleCellHoverOut"
    @change="handleChange"
    @close="handleClose"
    @destroy="handleDestroy"
    @init="handleInit"
    @label-click="handleLabelClick"
    @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 handleActiveDateChange() {
  // Logic for the active date change
}

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

function handleCellClick() {
  // Logic for event click
}

function handleCellHoverIn() {
  // Logic for handling cell hover in
}

function handleCellHoverOut() {
  // Logic for handling cell hover out
}

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 handleLabelClick() {
  // Logic for label click
}

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']"
    select="range"
    label="Range"
    labelStyle="stacked"
    inputStyle="outline"
    placeholder="Please select..."
    @active-date-change="handleActiveDateChange"
    @cancel="handleCancel"
    @cell-click="handleCellClick"
    @cell-hover-in="handleCellHoverIn"
    @cell-hover-out="handleCellHoverOut"
    @change="handleChange"
    @close="handleClose"
    @destroy="handleDestroy"
    @init="handleInit"
    @label-click="handleLabelClick"
    @open="handleOpen"
    @page-change="handlePageChange"
    @page-loaded="handlePageLoaded"
    @page-loading="handlePageLoading"
    @temp-change="handleTempChange"
  />
</template>
```

## Implementation notes

- Use `controls: ['calendar']` with `select: 'range'` on an input-triggered `Datepicker` (`display: 'anchored'` by default), and set `showRangeLabels: true` to show the clickable start/end labels above the calendar header.
- Wire the lifecycle hooks: `onActiveDateChange`, `onCancel`, `onCellClick`, `onCellHoverIn`, `onCellHoverOut`, `onChange`, `onClose`, `onDestroy`, `onInit`, `onLabelClick`, `onOpen`, `onPageChange`, `onPageLoaded`, `onPageLoading`, `onTempChange`. React/JS/jQuery handlers receive `(event, inst)`; Angular binds via `(onX)="onX($event)"` receiving `$event`; Vue binds via kebab-case `@active-date-change`, `@cancel`, `@cell-click`, `@cell-hover-in`, `@cell-hover-out`, `@change`, `@close`, `@destroy`, `@init`, `@label-click`, `@open`, `@page-change`, `@page-loaded`, `@page-loading`, `@temp-change`.
- `onCellClick`/`onCellHoverIn`/`onCellHoverOut`/`onLabelClick` fire because this is a calendar-grid (month view) range picker, unlike a scroller-only view with no day cells to hover/click.
- Each hook handler fires with the described event name; the firing order and frequency reflect which user interactions (hovering, clicking, dragging between months) and API calls trigger which hook.
- Calling `.setVal(null)` programmatically fires `onChange` and clears the selected range; calling `.open()` programmatically fires `onOpen`.
- Confirming a range selection displays the start and end dates 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: [Gregorian Jalali Hijri](https://demo.mobiscroll.com/vue/range/gregorian-jalali-hijri.md) - Use the Vue date range picker with Gregorian, Jalali, and Hijri calendar systems to support regional user bases.