---
title: "Javascript Date & Time Initializing the picker Example | Mobiscroll"
component: "Date & Time"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/datetime/usage-on-input-or-inline"
---

# Initializing the picker - JavaScript Date & Time demo

Javascript date and time picker component with usage on inputs or directly embeddable on page or in complex modals. Plain JavaScript API.

- [Live demo](https://demo.mobiscroll.com/javascript/datetime/usage-on-input-or-inline)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/datepicker/datetime/usage-on-input-or-inline)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/datetime/usage-on-input-or-inline.md), [Angular](https://demo.mobiscroll.com/angular/datetime/usage-on-input-or-inline.md), [React](https://demo.mobiscroll.com/react/datetime/usage-on-input-or-inline.md), [Vue](https://demo.mobiscroll.com/vue/datetime/usage-on-input-or-inline.md)

## Description

The date picker can be used on a Mobiscroll input or any other input part of an existing form.

There are two ways to use the date picker:

- Initialize it on a single input, either Mobiscroll or non-Mobisroll input.
- Embed the picker without an input. This can be the page itself or a more complex popup

## What this demo shows

- Shows two wheel-style date picker for selecting a single date using input-based pickers or an inline display.
- **Date picker with inputs** The first example open the picker when the user focuses or clicks the input.
- **Input behavior** The input-based pickers open below the input with a darkened backdrop. Clicking outside the picker closes it.
- **Inline date picker** The second example embeds the date picker directly in the page without an input by using inline display mode.
- **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 or click and drag separate columns 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.

## Best for

- **Single-date form fields** Choosing one date for an appointment, reservation, delivery, or deadline from an input-based picker.
- **Compact forms** Keeping the date picker hidden until the user focuses or clicks a date field.
- **Always-visible date selection** Embedding a wheel-style picker directly in a page when users need immediate access to date selection.

## Tutorial

### Date picker with input

Initialize it on any input, like a new mobiscroll field or an existing field from your form.

```html
<label>
    Date
    <input id="date" mbsc-input placeholder="Please select..." />
</label>
```

```js
mobiscroll.datepicker('#range', {
    controls: ['date']
});
```

### Embeddable date picker

It can be embedded into the page or a popup as an inline picker by setting the `display` option to `inline`. You can choose to initialize the picker on an `input type="hidden"` or just simply a div.

```html
<div id="date"></div>
```

```js
mobiscroll.datepicker('#date', {
    controls: ['date'],
    display: 'inline'
});
```

## 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
- [`showRangeLabels`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-showRangeLabels) - option
- [`display`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-display) - option

## Code

### JS

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

mobiscroll.datepicker('#demo-one-input', {
  controls: ['date'],
  showRangeLabels: true,
  display: 'anchored',
});

mobiscroll.datepicker('#demo-init-inline', {
  controls: ['date'],
  showRangeLabels: true,
  display: 'inline',
});
```

### HTML

```html
<label>
    Date
    <input id="demo-one-input" mbsc-input data-input-style="outline" data-label-style="stacked" placeholder="Please select..." />
</label>
<div id="demo-init-inline"></div>
```

## Implementation notes

- All examples use `controls: ['date']` - this demo only varies how the picker attaches to the page, not which controls it renders; there is no multiple-date/chip variant here.
- **On an existing/custom input**: React/Vue bind the picker to a plain `<input>` (or a custom input component) via the `inputComponent` option, with `inputProps` for attributes like `placeholder`. Angular applies the picker as a directive directly on an existing input element (e.g. `<input mbsc-datepicker>`, including third-party inputs like `ion-input`) instead of using the standalone component. JS/jQuery initialize the picker on a plain existing `<input>` element the same way they would on a generated one, since their datepicker call always targets an existing DOM element by selector.
- **On a generated Mobiscroll input**: for React and Angular, omitting `inputComponent`/the directive form and just rendering `<Datepicker controls={['date']} />` / `<mbsc-datepicker [controls]="['date']">` lets the component generate its own styled Mobiscroll input.
- **Inline, no input**: use `controls: ['date']` with `display: 'inline'` on a plain container instead of an input. JS/jQuery initialize on a `<div>` (or a hidden `<input type="hidden">`) rather than a visible text input, since there is no input to render when the picker is embedded directly in the page.
- `display: 'anchored'` (the default) is used for the input-bound variants; it is not set explicitly in the framework snippets since it's the default.

## 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

- Previous: [Mobile & Desktop usage](https://demo.mobiscroll.com/javascript/datetime/mobile-desktop-usage.md) - Javascript Date & time picker for desktop and mobile with touch and non-touch scroll. Supports pointer interaction.
- Next: [Responsive behavior](https://demo.mobiscroll.com/javascript/datetime/responsive.md) - Responsive Javascript date time picker. Define how it shows up across multiple screen sizes for touch and mouse interaction.