---
title: "Angular Date & Time Single value selection Example | Mobiscroll"
component: "Date & Time"
framework: "Angular"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/angular/datetime/single-select"
---

# Single value selection - Angular Date & Time demo

Angular picker & scroller for single date and date time selection. Tailored for mobile/desktop, touch/pointer interaction.

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

## Description

Single value selection is the default behavior of the date picker. You can explicitly enable it by setting the [`selectMultiple`](https://mobiscroll.com/docs/angular/datepicker/api#opt-selectMultiple) to `false`.

You can dynamically switch between single and multiple select or range select which helps with building a system for one-way and two-way bookings.

## What this demo shows

- Four inline wheel-style picker configurations for selecting a single date, time, or date and time.
- **Date picker** Separate scrollable wheels for the month, day, and year.
- **Time list picker** Separate scrollable wheels for the hour, minute, and AM/PM.
- **Timegrid picker** Time slots arranged in a grid at 30-minute intervals.
- **Date and time picker** Separate scrollable wheels for the date, hour, minute, and AM/PM. The current date is labeled `Today`; other dates display an abbreviated weekday, month, and day.
- **Scrolling behavior** The selected values appear in a central selection area while neighboring values are visually subdued. Users scroll vertically through each wheel to change the selection.

## Best for

- **Date-only selection** Choosing a birthday, travel date, due date, or other single calendar date.
- **Time-only wheel selection** Setting an appointment time, reminder time, opening time, or daily schedule time when compact scrolling controls are preferred.
- **Timegrid selection** Choosing an available appointment, reservation, or service time from clearly separated 30-minute slots.
- **Date and time selection** Scheduling an appointment, pickup, delivery, or other activity that requires one specific date and time.
- **Inline forms** Keeping the picker visible within booking, scheduling, or settings interfaces instead of opening it in an overlay.

## Tutorial

```html
<mbsc-datepicker
    [controls]="['date']"
    [selectMultiple]="false">
</mbsc-datepicker>
```

```html
<mbsc-datepicker
    [controls]="['time']"
    [selectMultiple]="false">
</mbsc-datepicker>
```

```html
<mbsc-datepicker
    [controls]="['timegrid']"
    [selectMultiple]="false">
</mbsc-datepicker>
```

```html
<mbsc-datepicker
    [controls]="['datetime']"
    [selectMultiple]="false">
</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
- [`selectMultiple`](https://mobiscroll.com/docs/angular/datepicker/api#opt-selectMultiple) - option
- [`inputStyle`](https://mobiscroll.com/docs/angular/datepicker/api#opt-inputStyle) - option
- [`labelStyle`](https://mobiscroll.com/docs/angular/datepicker/api#opt-labelStyle) - 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']"
    [selectMultiple]="false"
    label="Date"
    placeholder="Please Select..."
    inputStyle="box"
    labelStyle="stacked"
  ></mbsc-datepicker>
  <mbsc-datepicker
    [controls]="['time']"
    [selectMultiple]="false"
    label="Time"
    placeholder="Please Select..."
    inputStyle="box"
    labelStyle="stacked"
  ></mbsc-datepicker>
  <mbsc-datepicker
    [controls]="['date', 'time']"
    [selectMultiple]="false"
    label="Date & Time"
    placeholder="Please Select..."
    inputStyle="box"
    labelStyle="stacked"
  ></mbsc-datepicker>
</mbsc-page>
```

## Implementation notes

- Four separate inline picker instances render side by side, each using `display: 'inline'` - none is bound to an input.
- **Date only**: `controls: ['date']` - a single wheel/dropdown control for the month, day, and year.
- **Time only (list)**: `controls: ['time']` - separate wheels for hour, minute, and AM/PM.
- **Time only (grid)**: `controls: ['timegrid']` - a fixed-interval time grid instead of scrollable wheels.
- **Date and time**: `controls: ['datetime']` - combines the date and time wheels into a single scroller.
- `selectMultiple: false` is passed explicitly in the framework code snippets for clarity even though single-date selection is the default; the live demo script omits it since it's a no-op.
- `touchUi: false` is set in the fullscreen variant to force the dropdown rendering instead of the touch-scroller wheels; the main (non-fullscreen) demo page relies on the default touch-detected behavior.

## 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: [Start-end selection](https://demo.mobiscroll.com/angular/datetime/range-select.md) - Angular date time range picker & scroller with customizable start/end dates, labels, min & max length, range highlight.