--- title: "Angular date time and Ionic picker | Mobiscroll" component: "Date & Time" framework: "Angular" library_version: "6.1.5" url: "https://demo.mobiscroll.com/angular/datetime" --- # Angular Date & Time picker Angular and Ionic date & time picker demos for mobile and desktop web with date, time scrollers, validation, min/max & more. Last update: Oct 16, 2026 Mobile scroller and desktop dropdown with advanced features and great UX for **Angular** and **Ionic Angular** ## Description The date & time picker supports **single, multiple & range selection** with **mobile & desktop optimized rendering** and interaction model. Use it as a **scroller and dropdown**. Easily **switch between scroller and calendar view** or **single and range selection**. Capabilities like **built-in validation, minimum and maximum values and disabled dates** are supported by both the scroller and the calendar. ## Using the picker - [Mobile & Desktop usage](https://demo.mobiscroll.com/angular/datetime/mobile-desktop-usage.md) - Angular Date & time picker for desktop and mobile with touch and non-touch scroll. Supports pointer interaction. - [Initializing the picker](https://demo.mobiscroll.com/angular/datetime/usage-on-input-or-inline.md) - Angular date and time picker component with usage on inputs or directly embeddable on page or in complex modals. - [Responsive behavior](https://demo.mobiscroll.com/angular/datetime/responsive.md) - Responsive Angular date time picker. Define how it shows up across multiple screen sizes for touch and mouse interaction. - [Understanding display modes](https://demo.mobiscroll.com/angular/datetime/mobile-desktop-display.md) - Embeddable Angular date time picker for mobile and desktop with top, bottom, popup, center, modal, anchored positioning. ## Configuring the wheels - [Date selection](https://demo.mobiscroll.com/angular/datetime/date-picker.md) - Angular Date picker demo with scroller-style wheels for mobile and touch devices. Max date set to 100 yr. With source code. - [Time selection](https://demo.mobiscroll.com/angular/datetime/time-picker.md) - Angular Time picker demo with scroller wheel rendering for mobile and touch devices. Bottom or center display. - [Date & time selection](https://demo.mobiscroll.com/angular/datetime/date-time-picker.md) - Angular Datetime scroller demo with date, hour and minute wheels. Featuring iPhone style rendering and format. With source code. - [Setting time select steps](https://demo.mobiscroll.com/angular/datetime/time-value-steps.md) - Angular Date and time demo with 5 and 15 minute steps. Control hour, minute and second steps. With source code. ## Configuring value selection - [Single value selection](https://demo.mobiscroll.com/angular/datetime/single-select.md) - Angular picker & scroller for single date and date time selection. Tailored for mobile/desktop, touch/pointer interaction. - [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. - [Date types](https://demo.mobiscroll.com/angular/datetime/date-object-ISO-8601-moment.md) - Angular Date picker for mobile & desktop supporting data types: javascript date object, ISO 8601 strings and moment.js objects. - [Formatting values](https://demo.mobiscroll.com/angular/datetime/formatting-return-values.md) - Angular Date & time picker with variable formats, AM/PM, 12h/24h. Inherited from localization with override possibility. - [Credit card expiration](https://demo.mobiscroll.com/angular/datetime/month-year-picker.md) - Angular credit card expiration date select. Set up the date picker with month/year configuration. - [Setting values](https://demo.mobiscroll.com/angular/datetime/setting-values-defaults.md) - Angular Date & time picker demo with different ways to set values and defaults. Custom buttons and presets - like Now - supported. - [Timezones](https://demo.mobiscroll.com/angular/datetime/setting-the-picker-timezone.md) - Angular date time picker with multiple timezone support. Make selection in one TZ and return value in a different TZ. ## Validation & restricting selection - [Min & max values](https://demo.mobiscroll.com/angular/datetime/min-max-restrictions.md) - Angular date time picker & scroller with min/max restrictions, DOB picker, custom header text for instructions. - [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. - [Recurring values](https://demo.mobiscroll.com/angular/datetime/recurring-values.md) - Learn how to create recurring rules, RRULE and use them for disabling dates on the Angular date & time picker. ## Customizing the look & feel - [Theming capabilities](https://demo.mobiscroll.com/angular/datetime/themes-ios-material-windows.md) - Angular Date and time scroller with iOS, Material, Windows look & feel. Customize colors and styling with theme builder. ## Localization & tapping into the lifecycle - [Lifecycle events](https://demo.mobiscroll.com/angular/datetime/event-hooks.md) - Angular Date and time for mobile and desktop with event hooks for custom integration and functionality. With source code. - [Calendar systems](https://demo.mobiscroll.com/angular/datetime/gregorian-jalali-hijri.md) - Angular Date & time supporting calendar systems: Gregorian, Hijri and Jalali along with different languages and cultures. - [Localization](https://demo.mobiscroll.com/angular/datetime/localization.md) - Angular Date & time picker localization example supporting 37 languages, date, time formats with full RTL capability. - [RTL mode](https://demo.mobiscroll.com/angular/datetime/rtl-right-to-left.md) - Angular datetime picker with RTL support. Manual control and built-in right to left languages: Arabic, Hebrew, Farsi.