--- title: "Angular Popup Range picker with presets Example | Mobiscroll" component: "Popup" framework: "Angular" library_version: "6.1.5" url: "https://demo.mobiscroll.com/angular/popup/range-picker-popup-presets" --- # Range picker with presets - Angular Popup demo Use the Angular popup to create advanced range picker components with presets and more. - [Live demo](https://demo.mobiscroll.com/angular/popup/range-picker-popup-presets) - [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/pickers/popup/range-picker-popup-presets) - This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/popup/range-picker-popup-presets.md), [jQuery](https://demo.mobiscroll.com/jquery/popup/range-picker-popup-presets.md), [React](https://demo.mobiscroll.com/react/popup/range-picker-popup-presets.md), [Vue](https://demo.mobiscroll.com/vue/popup/range-picker-popup-presets.md) ## Description Build complex pickers to show within popups to make things easy for your users. A great example is date-range selection with presets. If you've ever used Google Analytics, you have probably seen the date range selector for filtering the data, which is very similar to what you can see in this example. Select custom start and end dates along with presets is helpful for easy access to predefined ranges that people are usually interested in. **Would like to explore more date & time picker functionality?** [Check out the range examples we have for you →](https://demo.mobiscroll.com/angular/range) ## What this demo shows - Shows a clickable input which opens a custom range picker with preset options. - **Popup behavior** The range picker opens below the input and closes when the user clicks outside it. - **Month view** The popup contains an inline date picker for selecting start and end dates. A fixed weekday header displays abbreviated day names from Sunday through Saturday, with the dates arranged in a grid below. - **Header navigation** Clicking 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 move between months. - **Swipe navigation** Dragging the calendar left or right moves between months. - **Day cell states** Hovering over a day displays a gray background behind its number. The first selected day becomes the range start, and the second becomes the range end. Selected dates appear 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 opens its corresponding month. - **Presets** The **Date range** dropdown beside the inline calendar provides **Custom**, **Today**, **Yesterday**, **Last week**, **Last month**, **Last 7 days**, and **Last 30 days** options. **Custom** is selected by default and allows free start and end date selection from the calendar. - **Start and end inputs** The **Start** and **End** inputs below the preset dropdown support date selection and manual date entry. They are enabled only when **Custom** is selected. - **Actions** The `Apply` button confirms the selected date range, while the gray `Cancel` button discards the change. - **Input value** After the user confirms the selection with `Apply`, the input displays the date range in month, day, and year format. ## Best for - **Analytics and reporting** Filter dashboards and reports by common periods such as today, last week, or last month, while retaining a custom range option. - **Transaction history** Review orders, payments, or account activity across frequently used date ranges. - **Logs and audit records** Narrow time-based records to recent periods or a manually entered start and end date. - **Operational dashboards** Switch quickly between standard monitoring windows such as the last 7 or 30 days. - **Search and data tables** Add compact date filtering where users need both preset ranges and precise custom selection. ## API used in this demo - [`theme`](https://mobiscroll.com/docs/angular/popup/api#opt-theme) - option - [`themeVariant`](https://mobiscroll.com/docs/angular/popup/api#opt-themeVariant) - option - [`display`](https://mobiscroll.com/docs/angular/popup/api#opt-display) - option - [`touchUi`](https://mobiscroll.com/docs/angular/popup/api#opt-touchUi) - option - [`buttons`](https://mobiscroll.com/docs/angular/popup/api#opt-buttons) - option - [`scrollLock`](https://mobiscroll.com/docs/angular/popup/api#opt-scrollLock) - option - [`showArrow`](https://mobiscroll.com/docs/angular/popup/api#opt-showArrow) - option - [`maxWidth`](https://mobiscroll.com/docs/angular/popup/api#opt-maxWidth) - option - [`responsive`](https://mobiscroll.com/docs/angular/select/api#opt-responsive) - option - [`touchUi`](https://mobiscroll.com/docs/angular/select/api#opt-touchUi) - option - [`onChange`](https://mobiscroll.com/docs/angular/select/api#event-onChange) - event - [`controls`](https://mobiscroll.com/docs/angular/datepicker/api#opt-controls) - option - [`select`](https://mobiscroll.com/docs/angular/datepicker/api#opt-select) - option - [`display`](https://mobiscroll.com/docs/angular/datepicker/api#opt-display) - option - [`showRangeLabels`](https://mobiscroll.com/docs/angular/datepicker/api#opt-showRangeLabels) - option - [`pages`](https://mobiscroll.com/docs/angular/datepicker/api#opt-pages) - option - [`returnFormat`](https://mobiscroll.com/docs/angular/datepicker/api#opt-returnFormat) - option - [`showOnClick`](https://mobiscroll.com/docs/angular/datepicker/api#opt-showOnClick) - option - [`showOnFocus`](https://mobiscroll.com/docs/angular/datepicker/api#opt-showOnFocus) - option - [`onChange`](https://mobiscroll.com/docs/angular/datepicker/api#event-onChange) - event - [`anchor`](https://mobiscroll.com/docs/angular/popup/api#opt-anchor) - option - [`responsive`](https://mobiscroll.com/docs/angular/popup/api#opt-responsive) - option - [`data`](https://mobiscroll.com/docs/angular/select/api#opt-data) - option - [`label`](https://mobiscroll.com/docs/angular/select/api#opt-label) - option - [`inputStyle`](https://mobiscroll.com/docs/angular/select/api#opt-inputStyle) - option - [`labelStyle`](https://mobiscroll.com/docs/angular/select/api#opt-labelStyle) - option - [`disabled`](https://mobiscroll.com/docs/angular/forms/input#opt-disabled) - option - [`startInput`](https://mobiscroll.com/docs/angular/datepicker/api#opt-startInput) - option - [`endInput`](https://mobiscroll.com/docs/angular/datepicker/api#opt-endInput) - option ## Code ### Component ```ts import { CommonModule } from '@angular/common'; import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { formatDate, MbscDatepickerOptions, MbscDateType, MbscInput, MbscModule, MbscPopup, MbscPopupOptions, MbscSelectData, MbscSelectOptions, options, setOptions, } from '@mobiscroll/angular'; setOptions({ theme: 'ios', themeVariant: 'light' }); const now = new Date(); const day = now.getDay(); const monday = now.getDate() - day + (day === 0 ? -6 : 1); const startDate = '2026-10-27T00:00'; const endDate = '2026-11-02T00:00'; @Component({ selector: 'app-root', templateUrl: './app.component.html', standalone: true, imports: [CommonModule, FormsModule, MbscModule], }) export class AppComponent implements OnInit, AfterViewInit { @ViewChild('popup', { static: false }) popup!: MbscPopup; @ViewChild('input', { static: false }) input!: MbscInput; inputElm!: HTMLElement; dateInput = ''; selected = 'custom'; selectedDate: MbscDateType[] = [startDate, endDate]; disableInput = false; respPopup: Record = { xsmall: { display: 'bottom', touchUi: true, buttons: [ { text: 'Apply', handler: () => { this.changeInputValue(this.selectedDate[0] as string, (this.selectedDate[1] || this.selectedDate[0]) as string); this.popup.close(); }, }, 'cancel', ], }, custom: { breakpoint: 559, buttons: [], display: 'anchored', anchorAlign: 'start', touchUi: false, scrollLock: false, showArrow: false, maxWidth: 920, }, }; respSelect = { xsmall: { touchUi: true, }, small: { touchUi: false, }, }; myData: MbscSelectData[] = [ { value: 'custom', text: 'Custom', }, { value: 'today', text: 'Today', }, { value: 'yesterday', text: 'Yesterday', }, { value: 'last-week', text: 'Last week', }, { value: 'last-month', text: 'Last month', }, { value: 'last-7-days', text: 'Last 7 days', }, { value: 'last-30-days', text: 'Last 30 days', }, ]; selectOptions: MbscSelectOptions = { responsive: { xsmall: { touchUi: true, }, small: { touchUi: false, }, }, onChange: (args) => { const s = args.value; if (s === 'custom') { this.disableInput = false; } else { this.disableInput = true; switch (s) { case 'today': this.selectedDate = ['2021-09-15T00:00', '2021-09-15T00:00']; break; case 'yesterday': this.selectedDate = ['2021-09-14T00:00', '2021-09-14T00:00']; break; case 'last-week': this.selectedDate = [ new Date(now.getFullYear(), now.getMonth(), monday - 7), new Date(now.getFullYear(), now.getMonth(), monday - 1), ]; break; case 'last-month': this.selectedDate = ['2021-08-01T00:00', '2021-08-31T00:00']; break; case 'last-7-days': this.selectedDate = ['2021-09-09T00:00', '2021-09-15T00:00']; break; case 'last-30-days': this.selectedDate = ['2021-08-17T00:00', '2021-09-15T00:00']; break; default: break; } } this.selected = s; }, }; calendarOptions: MbscDatepickerOptions = { controls: ['calendar'], select: 'range', display: 'inline', showRangeLabels: false, pages: 'auto', returnFormat: 'iso8601', showOnClick: false, showOnFocus: false, onChange: () => { this.disableInput = false; }, }; inputClick(): void { this.popup.open(); } changeInputValue(start: string, end: string): void { const locale = options.locale || {}; const dateFormat = locale.dateFormat || 'DD/MM/YYYY'; this.dateInput = formatDate(dateFormat, new Date(start)) + ' - ' + formatDate(dateFormat, new Date(end)); } applyClick(): void { const date = this.selectedDate; this.changeInputValue(date[0] as string, (date[1] || date[0]) as string); this.popup.close(); } cancelClick(): void { this.popup.close(); } ngOnInit(): void { this.changeInputValue(startDate, endDate); } ngAfterViewInit(): void { setTimeout(() => { this.inputElm = this.input.nativeElement; }); } } ``` ### Template ```html
Apply Cancel
``` ### CSS ```css .demo-date-filtering-popup .mbsc-ios.mbsc-datepicker-inline { border: none; border-radius: 4px; overflow: hidden; } .demo-date-filtering-popup .mbsc-textfield-wrapper-box { margin-top: 0; margin-right: 0; } .demo-date-filtering-dates { display: flex; flex-direction: column; } .demo-date-filtering-inputs { flex: 1; } .demo-date-filtering-desktop-buttons.mbsc-button-group-justified, .demo-date-filtering-desktop-buttons.mbsc-button-group-justified button { margin-bottom: 0; } @media (max-width: 575px) { .demo-date-filtering-desktop-buttons { display: none; } .demo-date-filtering-popup .mbsc-textfield-wrapper-box { margin-left: 0; } } ``` ## Implementation notes - `Popup` is opened by clicking the filter `Input` (`isOpen`/`:isOpen` bound to state set `true` on click in React/Vue; `popup.open()` via a `@ViewChild`/template-ref instance in Angular; `.setOptions`/`.open()` on the instance in JS/jQuery) and closed via `onClose`/`@close`. - `responsive` provides breakpoint-specific popup configs: an `xsmall` entry (`display: 'bottom'`, `touchUi: true`, a custom `'Apply'` button object plus `'cancel'`) for small screens, and a `custom` entry (`breakpoint: 559`, `buttons: []`, `display: 'anchored'`, `anchor` set to the filter input, `anchorAlign: 'start'`, `touchUi: false`, `scrollLock: false`, `showArrow: false`, `maxWidth: 920`) for larger screens - so the same popup renders as a bottom sheet with its own Apply/Cancel buttons on mobile and as an anchored, arrow-less panel with page-level Apply/Cancel buttons rendered outside the popup on desktop. - The `Select` (`Date range`) uses `data` entries with `value`/`text` pairs (`custom`, `today`, `yesterday`, `last-week`, `last-month`, `last-7-days`, `last-30-days`); its own `responsive` option switches its `touchUi` between breakpoints independently of the popup's. - Choosing anything other than `'custom'` in `onChange`/`@change` computes a `{ start, end }` pair (e.g. `today` → today/today, `last-7-days` → 6 days ago/today) and disables the Start/End `Input`s (`disabled`/`[disabled]`/`:disabled`); choosing `'custom'` re-enables them. - The nested `Datepicker` uses `select: 'range'`, `display: 'inline'`, `showRangeLabels: false`, `pages: 'auto'`, `returnFormat: 'iso8601'`, `showOnClick: false`, and `showOnFocus: false` - it renders inline inside the popup rather than opening its own popup, always returns ISO 8601 date strings/pairs, and doesn't open on clicking or focusing its bound inputs. It's wired to the Start/End `Input`s via `startInput`/`endInput` (`[startInput]`/`[endInput]` in Angular, `:startInput`/`:endInput` in Vue, refs in React, element IDs in JS/jQuery). - Picking a date in the calendar's `onChange`/`@change` sets `selected` back to `'custom'` and re-enables the Start/End inputs, overriding whatever preset was active. - `Apply` reformats the selected `{ start, end }` pair through `formatDate()` (using `options.locale.dateFormat`, defaulting to `'DD/MM/YYYY'`) into the filter input's display value and closes the popup; `Cancel` closes the popup without changing the input value. ## 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 - Previous: [Using as a tooltip](https://demo.mobiscroll.com/angular/popup/show-hide-tooltip-hover-in-out.md) - Use the Angular popup with custom content on event hover within the various event calendar views.