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

# Mobile & Desktop usage - Angular Date & Time demo

Angular Date & time picker for desktop and mobile with touch and non-touch scroll. Supports pointer interaction.

- [Live demo](https://demo.mobiscroll.com/angular/datetime/mobile-desktop-usage)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/datepicker/datetime/mobile-desktop-usage)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/datetime/mobile-desktop-usage.md), [jQuery](https://demo.mobiscroll.com/jquery/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, `ion-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/angular/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 mbsc-datepicker
    [controls]="['date']"
    [touchUi]="true"/>
```

```html
<input mbsc-datepicker
    #picker="mobiscroll"
    [controls]="['date']"
    [touchUi]="true"
    [showOnClick]="false"
    [showOnFocus]="false"/>
<mbsc-button (click)="openPicker()">Show picker</mbsc-button>
```

```ts
@ViewChild('picker', { static: false })
pickerInst: MbscDatepicker;

openPicker() {
    this.pickerInst.open();
};
```

```html
<mbsc-datepicker
    [controls]="['date']"
    [touchUi]="true">
</mbsc-datepicker>
```

```html
<mbsc-datepicker
    [controls]="['date']"
    display="inline"
    [touchUi]="true">
</mbsc-datepicker>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/angular/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/angular/datepicker/api#opt-themeVariant) - option
- [`controls`](https://mobiscroll.com/docs/angular/datepicker/api#opt-controls) - option
- [`showOnClick`](https://mobiscroll.com/docs/angular/datepicker/api#opt-showOnClick) - option
- [`showOnFocus`](https://mobiscroll.com/docs/angular/datepicker/api#opt-showOnFocus) - option
- [`inputStyle`](https://mobiscroll.com/docs/angular/datepicker/api#opt-inputStyle) - option
- [`display`](https://mobiscroll.com/docs/angular/datepicker/api#opt-display) - option

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MbscDatepicker, MbscModule, setOptions } from '@mobiscroll/angular';

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

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent {
  @ViewChild('picker', { static: false })
  pickerInst!: MbscDatepicker;

  today = new Date();

  openPicker(): void {
    this.pickerInst.open();
  }
}
```

### Template

```html
<mbsc-page>
  <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 mbsc-datepicker [controls]="['date']" 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
            mbsc-datepicker
            #picker="mobiscroll"
            [(ngModel)]="today"
            [controls]="['date']"
            [showOnClick]="false"
            [showOnFocus]="false"
            class="md-mobile-picker-input"
          />
        </div>
        <div class="mbsc-col-4">
          <mbsc-button variant="outline" color="primary" class="md-mobile-picker-button" (click)="openPicker()">Show picker</mbsc-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>
          <mbsc-datepicker
            [controls]="['date']"
            class="md-mobile-picker-box-label"
            inputStyle="box"
            placeholder="Please Select..."
          ></mbsc-datepicker>
        </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">
    <mbsc-datepicker [controls]="['date']" display="inline"></mbsc-datepicker>
  </div>
</mbsc-page>
```

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

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

   ```
   npm install
   ```

6. Run the project:

   ```
   ng serve
   ```

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

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

## Related demos

- Next: [Initializing the picker](https://demo.mobiscroll.com/angular/datetime/usage-on-input-or-inline.md) - Angular date and time picker component with usage on inputs or directly embeddable on page or in complex modals.