---
title: "Angular Range Mobile and Desktop Example | Mobiscroll"
component: "Range"
framework: "Angular"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/angular/range/mobile-desktop-usage"
---
# Mobile and Desktop - Angular Range demo
Configure the Angular date range picker for touch screens or desktop — link it to a form field, custom input, or embed it inline.
- [Live demo](https://demo.mobiscroll.com/angular/range/mobile-desktop-usage)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/datepicker/range/mobile-desktop-usage)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/range/mobile-desktop-usage.md), [jQuery](https://demo.mobiscroll.com/jquery/range/mobile-desktop-usage.md), [React](https://demo.mobiscroll.com/react/range/mobile-desktop-usage.md), [Vue](https://demo.mobiscroll.com/vue/range/mobile-desktop-usage.md)
## Description
Use the range picker 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 it 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 date range picker examples for selecting a start and end date from a monthly calendar.
- **Date range picker with inputs** The first example opens the range 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 range picker opens at the bottom of the container over a darkened backdrop. Clicking outside the picker closes it.
- **Inline date range picker** The fourth example embeds the date range picker directly in the page without an input by using inline display mode.
- **Start and end inputs** Clickable inputs appear above the calendar header. The active input has a white background, while the inactive input has a gray background. A clear button appears after a range is selected.
- **Header navigation** The month and year label in the upper-left corner opens the month and year picker. The previous and next arrow buttons on the right navigate between months.
- **Month view** A fixed weekday header shows abbreviated day names from Sunday through Saturday, with dates arranged in a grid below.
- **Month navigation** Drag the calendar left or right to move between months.
- **Day cell states** Hovering over a day highlights its number with a gray background. The first selected day becomes the range start, and the second becomes the range end. Selected days are highlighted in blue. The current date is highlighted by default and remains blue when another date is selected.
- **Adjacent months** Dates from the previous and next months use a muted style. Selecting one navigates to its corresponding month.
- **Footer actions** In the input-based examples, the gray `Cancel` button discards the change, while the blue `Set` button confirms the selected date range. Until a range is selected, the `Set` button remains inactive.
- **Input value** In the input-based examples, confirming a date with `Set` displays the selected range in the input using a month, day, and year format.
## Best for
- **Booking and reservation forms** Users can easily select an arrival and departure date, rental period, or reservation window.
- **Travel and accommodation searches** A date range can be entered through a standard input or a dedicated picker button.
- **Reporting and analytics filters** Users can define a start and end date for filtering data.
- **Forms with different input requirements** The picker can work with a standard HTML input, a Mobiscroll input, a trigger button, or without an input at all.
- **Always-visible date selection** An inline calendar provides direct access to range selection without opening a popup.
## Tutorial
```html
```
```html
Show picker
```
```ts
@ViewChild('picker', { static: false })
pickerInst: MbscDatepicker;
openPicker() {
this.pickerInst.open();
};
```
```html
```
```html
```
## 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
- [`select`](https://mobiscroll.com/docs/angular/datepicker/api#opt-select) - 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'
});
const now = new Date();
const week = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 6);
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent {
@ViewChild('picker', { static: false })
pickerInst!: MbscDatepicker;
thisWeek = [now, week];
openPicker(): void {
this.pickerInst.open();
}
}
```
### Template
```html
Use the picker with any inputs & show on focus/click
Disable onClick/onFocus and only show on button
Show picker
Use the picker with a Mobiscroll input
Use the picker inline in any 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
- Use `select: 'range'` with `showRangeLabels: true` and `touchUi: true`/`false` to switch the range picker between touch and pointer rendering.
- Any standard input can trigger the picker by default (`display` unset defaults to opening on focus/click); a Mobiscroll-styled input works the same way by adding the `mbsc-input` directive/component to the input element - no extra picker option is needed.
- Set `showOnClick: false` and `showOnFocus: false` to stop the picker opening from the input itself, then trigger it imperatively from a separate button: JS/jQuery call `.open()` on the stored instance; React tracks open state with `isOpen`/`onClose` props; Angular exposes the picker via a template reference (`#picker="mobiscroll"`) and calls `pickerInst.open()` from a `ViewChild`; Vue tracks `isOpen` in a ref and toggles it, binding `@close` to reset it.
- `display: 'inline'` embeds the range picker directly in the page markup with no trigger input at all.
- In React, `inputComponent="input"` plus `inputProps={{ placeholder: ... }}` render a plain native `` instead of the default Mobiscroll input; other frameworks configure the native/Mobiscroll input directly in markup.
## 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: [Input or Inline Usage](https://demo.mobiscroll.com/angular/range/usage-on-input-or-inline.md) - Use the Angular date range picker on a single input, two separate start/end inputs, or inline on the page — no input required.