---
title: "Angular Date & Time Min & max values Example | Mobiscroll"
component: "Date & Time"
framework: "Angular"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/angular/datetime/min-max-restrictions"
---

# Min & max values - Angular Date & Time demo

Angular date time picker & scroller with min/max restrictions, DOB picker, custom header text for instructions. For Angular 22 and Ionic 8.

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

## Description

Configuring minimum and maximum selectable values is great for reducing mistakes. Help people by limiting the selections for the task at hand. Use the [`min`](https://mobiscroll.com/docs/angular/datepicker/api#opt-min) and [`max`](https://mobiscroll.com/docs/angular/datepicker/api#opt-max) options to restrict the selection. Setting the values will disable dates/times earlier than `min` and dates/times that come after `max`.

By default these options are empty and the date picker supports infinite navigation, while the time picker has all 24 hours/60 minutes/... available for selection. Values can be passed as [JS date objects, ISO date strings or Moment.js objects](https://demo.mobiscroll.com/angular/datetime/date-object-ISO-8601-moment).

**Looking to invalidate more dates/times?** [Discover how to disable specific values →](https://demo.mobiscroll.com/angular/datetime/disabled-invalid-values)

## What this demo shows

- Shows a wheel-style inline date picker for setting min and max values, restrictions.
- **Display mode** A segmented control on the left side of the picker switches between a date, time list, time grid and date and time picker layout. The date picker is selected by default.
- **Exact minimum and maximum values** The control panel enables both limits by default, with the minimum set to `01-01-1920` and the maximum set to `01-01-2050`. Dates or times before the minimum and after the maximum are disabled.
- **Dynamic restriction** The `Or set a dynamically calculated date` option disables dates more than 18 years in the past. This option is disabled by default.
- **Inline date picker** The 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.

## Best for

- **Appointment booking** Limit bookings to the dates and times when appointments can be offered.
- **Travel and accommodation** Prevent users from choosing arrival or departure dates outside an available booking window.
- **Age-based eligibility** Apply a dynamically calculated limit for workflows that require users to meet a minimum or maximum age.
- **Campaign and registration periods** Accept date selections only within a defined enrollment, promotion, or event window.
- **Historical and forecast data** Keep date filters within the period covered by the available data.

## Tutorial

- (x) Date
- ( ) Time list
- ( ) Time grid
- ( ) Date & time

### Set an exact date

- [x] Minimum date

`01/01/1920`

- [x] Maximum date

`01/01/2050`

### Or set a dynamically calculated date

- [ ] Date of birth (older than 18)

```html
<mbsc-datepicker
    [controls]="['date']"
    min="1920-01-01"
    max="2050-01-01">
</mbsc-datepicker>
```

With "Time list":

```html
<mbsc-datepicker
    [controls]="['time']"
    min="10:30"
    max="19:30">
</mbsc-datepicker>
```

With "Time grid":

```html
<mbsc-datepicker
    [controls]="['timegrid']"
    min="10:30"
    max="19:30">
</mbsc-datepicker>
```

With "Date & time":

```html
<mbsc-datepicker
    [controls]="['datetime']"
    min="2000-01-01T12:00"
    max="2050-01-01T12:00">
</mbsc-datepicker>
```

With "Minimum date" off:

```html
<mbsc-datepicker
    [controls]="['date']"
    max="2050-01-01">
</mbsc-datepicker>
```

With "Maximum date" off:

```html
<mbsc-datepicker
    [controls]="['date']"
    min="1920-01-01">
</mbsc-datepicker>
```

With "Date of birth (older than 18)" on:

```html
<mbsc-datepicker
    [controls]="['date']"
    [max]="birthday">
</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
- [`display`](https://mobiscroll.com/docs/angular/datepicker/api#opt-display) - option
- [`min`](https://mobiscroll.com/docs/angular/datepicker/api#opt-min) - option
- [`max`](https://mobiscroll.com/docs/angular/datepicker/api#opt-max) - 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-datepicker [controls]="['date']" display="inline" min="1920-01-01" max="2050-01-01"></mbsc-datepicker>
<mbsc-datepicker [controls]="['time']" display="inline" min="10:30" max="19:30"></mbsc-datepicker>
<mbsc-datepicker [controls]="['timegrid']" display="inline" min="10:30" max="19:30"></mbsc-datepicker>
<mbsc-datepicker [controls]="['datetime']" display="inline" min="2000-01-01T12:00" max="2050-01-01T12:00"></mbsc-datepicker>
```

## Implementation notes

- A single inline `Datepicker` instance's `controls` can be switched at runtime between `['date']`, `['time']`, `['timegrid']`, and `['datetime']` via `setOptions`.
- In `Date` mode, `min` and `max` can be set independently, e.g. `min: '1920-01-01'` and `max: '2050-01-01'`.
- `max` can instead be set to a dynamically calculated date, e.g. an 18-years-ago date computed as `new Date(now.getFullYear() - 18, now.getMonth(), now.getDate())`, for age-based restrictions (Date mode only).
- In `Time list` mode, `min`/`max` can be set to time-of-day values relative to the current date, e.g. `10:30` and `19:30`.
- `Time grid` mode (`controls: ['timegrid']`) supports the same `min`/`max` time-of-day restrictions as `Time list` mode.
- In `Date & time` mode, `min`/`max` bind full date-and-time values, e.g. `min: '2000-01-01T12:00'`, `max: '2050-01-01T12:00'`.
- `min`/`max` values can be passed as ISO strings, `Date` objects, or Moment.js objects.

## 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: [Disabled values](https://demo.mobiscroll.com/angular/datetime/disabled-invalid-values.md) - Angular datepicker example for setting invalid days, disabling dates, weekends, holidays, specific and recurring dates.