---
title: "Angular Date & Time Date selection Example | Mobiscroll"
component: "Date & Time"
framework: "Angular"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/angular/datetime/date-picker"
---

# Date selection - Angular Date & Time demo

Angular Date picker demo with scroller-style wheels for mobile and touch devices. Max date set to 100 yr. With source code. For Angular 22 and Ionic 8.

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

## Description

The date picker ships with five built-in variations for rendering the UI. The [`controls` option](https://mobiscroll.com/docs/angular/datepicker/api#opt-controls) supports the following:

- `date` - renders a date-only scroller or dropdown control
- `time` - renders a time-only scroller or dropdown control
- `timegrid` - renders a time grid for time selection
- `datetime` - renders a date & time scroller or dropdown
- `calendar` - renders a calendar view for date picking

When passing `controls: ['date']`, the date picker will render a date-only picker - scroller for `touchUi: true` and a dropdown for `touchUi: false`.

You can further customize the `dateFormat` and `dateWheels` to fine-tune the UX... use it as a credit card expiration picker.

**Interested in dynamically switching between modes?** [Learn how to set up responsive behavior →](https://demo.mobiscroll.com/angular/datetime/responsive)

## What this demo shows

- Two wheel-style date picker configurations: one for selecting a specific date and another for selecting only a month and year.
- **Date picker** The first example opens when the user focuses or clicks the input. Separate scrollable wheels let users select the month, day, and year.
- **Month and year picker** The second example opens when the user focuses or clicks the input. Separate scrollable wheels let users select the month and year without choosing a day.
- **Selection** The selected values appear in the central selection area, while neighboring values remain visually subdued.
- **Scrolling behavior** Users can scroll vertically through neighboring values to move between dates, months, and years.
- **Input behavior** Each picker opens at the bottom of the container over a darkened backdrop. Clicking outside the picker closes it.
- **Footer actions** The gray `Cancel` button discards the change, while the blue `Set` button confirms the selection.
- **Input value** Confirming a selection with `Set` displays the selected value in the associated input.

## Best for

- **Single-date selection** Choosing a specific date while keeping neighboring month, day, and year values visible.
- **Month and year selection** Choosing month-and-year values when a specific day is unnecessary, such as for credit card expiration dates.

## Tutorial

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

```html
<mbsc-datepicker
    [controls]="['date']"
    dateFormat="MM/YYYY"
    dateWheels="|MMMM YYYY|"
    [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
- [`inputStyle`](https://mobiscroll.com/docs/angular/datepicker/api#opt-inputStyle) - option
- [`labelStyle`](https://mobiscroll.com/docs/angular/datepicker/api#opt-labelStyle) - option
- [`dateFormat`](https://mobiscroll.com/docs/angular/datepicker/api#localization-dateFormat) - option
- [`dateWheels`](https://mobiscroll.com/docs/angular/datepicker/api#localization-dateWheels) - option

## Code

### Component

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

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

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent {}
```

### Template

```html
<mbsc-page>
  <mbsc-datepicker
    [controls]="['date']"
    label="Date picker"
    inputStyle="outline"
    labelStyle="stacked"
    placeholder="Please Select..."
  ></mbsc-datepicker>
  <mbsc-datepicker
    [controls]="['date']"
    dateFormat="MM/YYYY"
    dateWheels="MMMM YYYY"
    label="Month & year picker"
    inputStyle="outline"
    labelStyle="stacked"
    placeholder="Please Select..."
  ></mbsc-datepicker>
</mbsc-page>
```

## Implementation notes

- Two independent `Datepicker` instances, each bound to its own input (`display: 'anchored'` by default for an input-triggered picker) with `controls: ['date']`.
- **Date picker** Uses `controls: ['date']` with no format overrides - renders the default month/day/year wheel set (dropdowns instead of wheels when `touchUi: false`).
- **Month & year picker** Same `controls: ['date']`, but adds `dateFormat: 'MM/YYYY'` (controls the input's displayed value) and `dateWheels: 'MMMM YYYY'` (controls the wheel/dropdown set actually shown, dropping the day wheel) - both options are needed together; setting only `dateFormat` would still show a day wheel.
- No other options are required for this pair - it is the minimal setup for a day-level vs. month-level wheel picker sharing the same `controls: ['date']` mode.

## 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: [Time selection](https://demo.mobiscroll.com/angular/datetime/time-picker.md) - Angular Time picker demo with scroller wheel rendering for mobile and touch devices. Bottom or center display.