---
title: "Javascript Date & Time Lifecycle events Example | Mobiscroll"
component: "Date & Time"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/datetime/event-hooks"
---

# Lifecycle events - JavaScript Date & Time demo

Javascript Date and time for mobile and desktop with event hooks for custom integration and functionality. With source code. Plain JavaScript API.

- [Live demo](https://demo.mobiscroll.com/javascript/datetime/event-hooks)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/datepicker/datetime/event-hooks)
- This demo in other frameworks: [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), [Vue](https://demo.mobiscroll.com/vue/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 `onChange`, `onSet`, `onInit` ... will be triggered.

**For a complete list of events go to the documentation** [See available lifecycle events →](https://mobiscroll.com/docs/javascript/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
onCancel: function (event, inst) { /* Logic for cancel button click */ },
onChange: function (event, inst) { /* Logic for value change */ },
onClose: function (event, inst) { /* Your custom event handler goes here */ },
onDestroy: function (event, inst) { /* Your custom event handler goes here */ },
onInit: function (event, inst) { /* Logic running on component init */ },
onOpen: function (event, inst) { /* Your custom event handler goes here */ },
onPageChange: function (event, inst) { /* Your custom event handler goes here */ },
onPageLoaded: function (event, inst) { /* Use it to inject custom markup & attach custom listeners */ },
onPageLoading: function (event, inst) { /* Use it to load data on demand */ },
onTempChange: function (event, inst) { /* Logic for temporary value change */ }
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-themeVariant) - option
- [`controls`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-controls) - option
- [`onCancel`](https://mobiscroll.com/docs/javascript/datepicker/api#event-onCancel) - event
- [`onChange`](https://mobiscroll.com/docs/javascript/datepicker/api#event-onChange) - event
- [`onClose`](https://mobiscroll.com/docs/javascript/datepicker/api#event-onClose) - event
- [`onDestroy`](https://mobiscroll.com/docs/javascript/datepicker/api#event-onDestroy) - event
- [`onInit`](https://mobiscroll.com/docs/javascript/datepicker/api#event-onInit) - event
- [`onOpen`](https://mobiscroll.com/docs/javascript/datepicker/api#event-onOpen) - event
- [`onPageChange`](https://mobiscroll.com/docs/javascript/datepicker/api#event-onPageChange) - event
- [`onPageLoaded`](https://mobiscroll.com/docs/javascript/datepicker/api#event-onPageLoaded) - event
- [`onPageLoading`](https://mobiscroll.com/docs/javascript/datepicker/api#event-onPageLoading) - event
- [`onTempChange`](https://mobiscroll.com/docs/javascript/datepicker/api#event-onTempChange) - event

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

mobiscroll.datepicker('#demo', {
  controls: ['date'],
  onCancel: function () {
    // Logic for cancel button click
  },
  onChange: function () {
    // Logic for value change
  },
  onClose: function () {
    // Your custom event handler goes here
  },
  onDestroy: function () {
    // Your custom event handler goes here
  },
  onInit: function () {
    // Logic running on component init
  },
  onOpen: function () {
    // Your custom event handler goes here
  },
  onPageChange: function () {
    // Your custom event handler goes here
  },
  onPageLoaded: function () {
    // Use it to inject custom markup & attach custom listeners
  },
  onPageLoading: function () {
    // Use it to load data on demand
  },
  onTempChange: function () {
    // Logic for temporary value change
  },
});
```

### HTML

```html
<label>
    Date
    <input id="demo" mbsc-input data-label-style="stacked" data-input-style="box" placeholder="Please select..." />
</label>
```

## 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-javascript.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 javascript
   ```

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 javascript --trial`.

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

## Related demos

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