---
title: "Javascript Date & Time Mobile & Desktop usage Example | Mobiscroll"
component: "Date & Time"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/datetime/mobile-desktop-usage"
---

# Mobile & Desktop usage - JavaScript Date & Time demo

Javascript Date & time picker for desktop and mobile with touch and non-touch scroll. Supports pointer interaction. Plain JavaScript API.

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

## Description

Use the date & time for both mobile and desktop or set it up responsively.

The main difference between the two rendering modes is how the picker is laid out. Set the `touchUi` option to `false` and the component shows up suitable for larger screens and pointer interaction while setting it to `true` renders it suitable for touch screens.

Use the date picker on an existing form field, custom input or use it on Mobiscroll form fields. You can also embed it directly into your page. When linked to an input, the component will be shown on focus or when someone clicks on the field. Alternatively, you can leave the input editable and show the component only on a button click.

**Handle different screen sizes by setting it up responsively** [Check out the responsive demo →](https://demo.mobiscroll.com/javascript/datetime/responsive)

## What this demo shows

- Shows four wheel-style date picker configurations for selecting a single date in touch and desktop layouts.
- **Date picker with inputs** The first example opens the picker when the user focuses or clicks a standard input. The second opens it only from the `Show picker` button next to the input. The third uses a Mobiscroll input.
- **Input behavior** In the three input-based examples, the picker opens at the bottom of the container over a darkened backdrop. Clicking outside the picker closes it.
- **Inline date picker** The fourth example embeds the 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 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.
- **Selection pattern** The wheel interface provides an alternative to selecting a date from a calendar grid.

## Best for

- **Personal details** Birth dates and profile forms that require a specific date.
- **Appointments and reservations** Booking flows where users choose an appointment or reservation date.
- **Planning and deadlines** Forms for selecting due dates, deadlines, and other single dates.
- **Touch and desktop forms** Date entry workflows that need layouts suited to both touch and pointer interaction.

## Tutorial

```html
<input id="input-picker" />
```

```js
mobiscroll.datepicker('#input-picker', {
    controls: ['date'],
    touchUi: true
});
```

```html
<input id="button-picker" />
<button id="show-picker">Show picker</button>
```

```js
mobiscroll.datepicker('#button-picker', {
    controls: ['date'],
    touchUi: true,
    showOnClick: false,
    showOnFocus: false
});

document
    .getElementById('show-picker')
    .addEventListener('click', function () {
        instance.open();
        return false;
    });
```

```html
<label>
    <input id="mobi-picker" mbsc-input />
</label>
```

```js
mobiscroll.datepicker('#mobi-picker', {
    controls: ['date'],
    touchUi: true
});
```

```html
<div id="inline-picker"></div>
```

```js
mobiscroll.datepicker('#inline-picker', {
    controls: ['date'],
    touchUi: true
});
```

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

## Code

### JS

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

mobiscroll.datepicker('#demo-mobile-picker-input', {
  controls: ['date'],
});

var instance = mobiscroll.datepicker('#demo-mobile-picker-button', {
  controls: ['date'],
  showOnClick: false,
  showOnFocus: false,
});

instance.setVal(new Date(), true);

mobiscroll.datepicker('#demo-mobile-picker-mobiscroll', {
  controls: ['date'],
});

mobiscroll.datepicker('#demo-mobile-picker-inline', {
  controls: ['date'],
  display: 'inline',
});

document.getElementById('show-mobile-date-picker').addEventListener('click', function () {
  instance.open();
  return false;
});
```

### HTML

```html
<div class="mbsc-grid">
    <div class="mbsc-form-group">
        <div class="mbsc-row">
            <div class="mbsc-col-12">
                <div class="mbsc-txt-muted md-mobile-picker-header">Use the picker with any inputs & show on focus/click</div>
                <input id="demo-mobile-picker-input" class="md-mobile-picker-input" placeholder="Please Select..." />
            </div>
        </div>
    </div>
    <div class="mbsc-form-group">
        <div class="mbsc-row">
            <div class="mbsc-col-12 mbsc-txt-muted md-mobile-picker-header">Disable <code>onClick/onFocus</code> and only show on button</div>
            <div class="mbsc-col-8">
                <input id="demo-mobile-picker-button" class="md-mobile-picker-input" />
            </div>
            <div class="mbsc-col-4">
                <button mbsc-button data-variant="outline" data-color="primary" id="show-mobile-date-picker" class="md-mobile-picker-button">Show picker</button>
            </div>
        </div>
    </div>
    <div class=" mbsc-form-group">
        <div class="mbsc-row">
            <div class="mbsc-col-12">
                <div class="mbsc-txt-muted md-mobile-picker-header">Use the picker with a Mobiscroll input</div>
                <label class="md-mobile-picker-box-label">
                <input id="demo-mobile-picker-mobiscroll" mbsc-input data-label-style="stacked" data-input-style="box" placeholder="Please Select..." />
            </label>
            </div>
        </div>
    </div>
    <div class="mbsc-txt-muted md-mobile-picker-header">Use the picker inline in any page</div>
</div>
<div class="md-mobile-picker-inline">
    <div id="demo-mobile-picker-inline"></div>
</div>
```

### CSS

```css
.md-mobile-picker-header {
    font-size: 14px;
}

input.md-mobile-picker-input {
    color: initial;
    width: 100%;
    padding: 10px;
    margin: 6px 0 12px 0;
    border: 1px solid #ccc;
    border-radius: 0;
    font-family: arial, verdana, sans-serif;
    font-size: 14px;
    box-sizing: border-box;
    -webkit-appearance: none;
}

.md-mobile-picker-button.mbsc-button {
    font-size: 13px;
    padding: 0 15px;
    line-height: 36px;
    float: right;
    margin: 6px 0;
    width: 100%;
}

.mbsc-col-no-padding {
    padding-left: 0;
}

.md-mobile-picker-box-label.mbsc-textfield-wrapper-box,
.md-mobile-picker-box-label .mbsc-textfield-wrapper-box,
.md-mobile-picker-inline {
    margin: 6px 0 12px 0;
}
```

## Implementation notes

- Four separate `Datepicker` instances, all using `controls: ['date']` (wheel-style, not the month-grid `calendar` control).
- The first attaches to a plain input and opens on focus/click by default (no extra options beyond `controls`).
- Setting `showOnClick: false` and `showOnFocus: false` prevents the picker from opening via the input; it can then only be opened programmatically: React drives it with an `isOpen` prop plus `onClose` handler, Angular calls the instance's `open()` method via a `ViewChild` reference, and Vue/JS/jQuery call `.open()` on the retrieved instance directly. An initial value can be seeded without opening the picker via `onInit: (event, inst) => inst.setVal(new Date(), true)`.
- The third attaches to an `mbsc-input`-styled input (`inputComponent="input"` in React) and opens on focus/click like the first, just with the styled input treatment.
- The fourth embeds the picker directly with `display: 'inline'` and no associated input.
- `touchUi` (true by default on touch devices) determines whether the picker renders as scroller wheels (`true`) or dropdowns/desktop rendering (`false`).

## 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: [Initializing the picker](https://demo.mobiscroll.com/javascript/datetime/usage-on-input-or-inline.md) - Javascript date and time picker component with usage on inputs or directly embeddable on page or in complex modals.