--- title: "Angular Date & Time Range Picker Component | Mobiscroll" component: "Range" framework: "Angular" library_version: "6.2.0" url: "https://demo.mobiscroll.com/angular/range" --- # Highly customizable Angular range picker for date & time Angular date & time range picker for flight, accommodation, and resource booking — calendar, week, or scroller view, with range selection. Last update: Oct 30, 2026 Responsive range picker for flight, accommodation and resource booking **Angular** and **Ionic Angular** ## Description The range picker supports **start & end selection** for **date, time** and combined **date & time**. Choose between a **calendar view** with one or more months, **week view** with single or multiple weeks or **date and time scrollers and dropdowns**. Easily **switch between single and range select** for use cases like one-way flights. Capabilities like **built-in validation, minimum and maximum values, disabled dates and range length** are supported by both the scroller and the calendar. ## Using the picker - [Mobile and Desktop](https://demo.mobiscroll.com/angular/range/mobile-desktop-usage.md) - Configure the Angular date range picker for touch screens or desktop — link it to a form field, custom input, or embed it inline. - [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. - [Responsive Layout](https://demo.mobiscroll.com/angular/range/responsive.md) - Configure the Angular date range picker responsively — show one month on mobile and two months on larger screens using built-in breakpoints. - [Understanding Controls](https://demo.mobiscroll.com/angular/range/calendar-scroller-dropdown.md) - Build a Angular date range picker with switchable calendar view, date scroller, and datetime dropdown — adapts to mobile scroller or desktop dropdown. - [Display Modes](https://demo.mobiscroll.com/angular/range/mobile-desktop-display.md) - Configure how the Angular range picker appears — inline embed, anchored to an input, or modal — for mobile and desktop layouts. ## Common use cases - [Date Filter with Preset Ranges](https://demo.mobiscroll.com/angular/range/date-filtering-with-predefined-ranges.md) - Build a date filtering UI with the Angular date range picker — choose from custom or preset ranges (Today, Last 7 days, Last 30 days). - [Flight Booking](https://demo.mobiscroll.com/angular/range/flight-booking.md) - Build a flight booking date picker with the Angular range component — round-trip and one-way selection. - [Rental Availability](https://demo.mobiscroll.com/angular/range/book-rental-months-ahead.md) - Build a rental availability calendar with the Angular date range picker — multi-month view with seasonal pricing display and booking validation. - [Event Date Selection](https://demo.mobiscroll.com/angular/range/adding-event-start-end.md) - Pick start and end dates for events with the Angular date range picker — switch between date-only and date and time entry with an all-day toggle. ## Configuring the view - [Date Range Picker](https://demo.mobiscroll.com/angular/range/date-range.md) - Set up a Angular date range picker as a calendar view or date scroller — inline or in a popup, with one or two inputs. - [Time Range Picker](https://demo.mobiscroll.com/angular/range/time-range.md) - Select start and end times with the Angular time range picker — choose inline scroller, time grid, or single/split input layouts. - [Date & Time Range Picker](https://demo.mobiscroll.com/angular/range/date-time-range.md) - Pick start and end date-times with the Angular range picker — choose from calendar, time grid, or date-time scroller, with single or split input layouts. - [Range Picker Customization](https://demo.mobiscroll.com/angular/range/week-month-view-scrolling-direction.md) - Show multiple months or weeks in the Angular date range picker — set scroll direction, week numbers, and outer day visibility. - [Label Customization](https://demo.mobiscroll.com/angular/range/customizing-labels-selection.md) - Override the start/end date labels on the Angular date range picker — show/hide highlight selected range or range labels. - [Day Marks, Colors & Labels](https://demo.mobiscroll.com/angular/range/dots-colors-labels.md) - Highlight days with or background colors in the Angular date range picker — configure by exact date, date range, and or recurring rule. ## Configuring value selection - [Presets](https://demo.mobiscroll.com/angular/range/presets.md) - Offer one-click preset ranges — Today, Yesterday, This week, Last month — on the Angular date range selector for fast filtering. - [Date Formats](https://demo.mobiscroll.com/angular/range/date-object-ISO-8601-moment.md) - Use the Angular date range picker with JS Date, ISO 8601, or Moment.js — auto-detect input formats and configure the return formats. - [Custom Date & Time Format](https://demo.mobiscroll.com/angular/range/formatting-return-values.md) - Set custom date and time display formats on the Angular date range picker — see how selected values appear and reorder the time picker wheels. - [Timezone Settings](https://demo.mobiscroll.com/angular/range/setting-the-picker-timezone.md) - Configure data and display timezones on the Angular date range picker using Luxon, Moment-Timezone, or Day.js for timezone-aware date selection. ## Validation & restricting selection - [Min Max Length](https://demo.mobiscroll.com/angular/range/min-max-length.md) - Enforce minimum and maximum length limits on date & time range selection with the Angular range picker — ideal for booking. - [Date Restrictions](https://demo.mobiscroll.com/angular/range/min-max-restrictions.md) - Set min and max date limits in the Angular date range picker to restrict selectable dates and times — supports date-only and date-time modes. - [Date Validation](https://demo.mobiscroll.com/angular/range/disabled-invalid-values.md) - Disable exact dates, date ranges, or recurring dates in the Angular date range picker — control which dates are available for selection. - [Recurring Rules](https://demo.mobiscroll.com/angular/range/recurring-values.md) - Configure recurring date patterns — daily, weekly, monthly, or yearly — with stop conditions and date exceptions in the Angular date range picker. ## Customizing the look & feel - [Theme Customization](https://demo.mobiscroll.com/angular/range/themes-ios-material-windows.md) - Style the Angular date range picker with iOS, Material, or Windows themes — switch light/dark mode, apply brand colors via theme builder or CSS. - [Custom Shaped Day Marks](https://demo.mobiscroll.com/angular/range/customize-marked-day-shapes.md) - Customize day mark shapes on the Angular date range picker — show triangles, squares, and dots with CSS overrides. - [Custom Day Styling](https://demo.mobiscroll.com/angular/range/half-day-styling.md) - Style day cells in the Angular date range picker with custom CSS classes — including check-in and check-out date highlights. ## Localization & tapping into the lifecycle - [Event Hooks](https://demo.mobiscroll.com/angular/range/event-hooks.md) - Attach custom logic to the Angular date range picker using lifecycle event hooks that fire on user interaction. - [Gregorian Jalali Hijri](https://demo.mobiscroll.com/angular/range/gregorian-jalali-hijri.md) - Select a date range with Gregorian, Jalali (Persian), or Hijri (Arabic) calendar systems in the Angular date range picker. - [Localization](https://demo.mobiscroll.com/angular/range/localization.md) - Localize the Angular date range picker — set date and time formats, button labels, RTL support for 37 languages, with overridable settings. - [RTL Support](https://demo.mobiscroll.com/angular/range/rtl-right-to-left.md) - Use the Angular range picker with built-in RTL support — set right-to-left layout manually or inherit it from locale settings.