
Ionic date and time picker Mobiscroll
Date time picker with validation, min max, native UX and customization options.
$95.00
Details
Mobiscroll Date & Time
The mobile picker control which perfectly fits into your workflow
Works across the web and hybrid apps.
Overview
Controls for iOSControls for Android
Controls for Windows Phone
Localization options
Simple API with deep customization
Date picker with maximum date 100 years from today
HTML
```
```
Javascript
angular
.module('demoApp', ['mobiscroll-datetime'])
.controller('demoController', ['$scope', function ($scope) {
var now = new Date(),
max = new Date(now.getFullYear() + 100, now.getMonth(), now.getDate());
$scope.settings = {
theme: 'ios',
display: 'bottom',
max: max
};
}]);
Time picker
HTML
```
```
Javascript
angular
.module('demoApp', ['mobiscroll-datetime'])
.controller('demoController', ['$scope', function ($scope) {}]);
Disable exact and recurring dates
HTML
```
```
Javascript
``` angular .module('demoApp', ['mobiscroll-datetime']) .controller('demoController', ['$scope', function ($scope) { var today = new Date(), currYear = today.getFullYear(), currMonth = today.getMonth(), maxDate = new Date(currYear, currMonth + 6, today.getDate()), closed = ['w0', 'w6', '1/1', '1/2', '12/25', '12/26'], booked = [new Date(currYear, currMonth, 26), new Date(currYear, currMonth + 1, 10), new Date(currYear, currMonth + 2, 25)], invalid = closed.concat(booked);
$scope.settings = {
theme: 'ios',
display: 'bottom',
min: today,
max: maxDate,
invalid: invalid,
dateWheels: 'dd D MM yy'
};
}]);
```
Write custom handlers for lifecycle events
Javascript
angular
.module('demoApp', ['mobiscroll-datetime'])
.controller('demoController', ['$scope', function ($scope) {
$scope.settings = {
theme: 'material',
onInit: function (event, inst) { // Custom event handler },
onMarkupReady: function (event, inst) { // Custom event handler },
onBeforeShow: function (event, inst) { // Custom event handler },
onPosition: function (event, inst) { // Custom event handler },
onShow: function (event, inst) { // Custom event handler },
onSet: function (event, inst) { // Custom event handler },
onItemTap: function (event, inst) { // Custom event handler },
onDestroy: function (event, inst) { // Custom event handler },
onClose: function (event, inst) { // Custom event handler },
onChange: function (event, inst) { // Custom event handler },
onCancel: function (event, inst) { // Custom event handler },
onBeforeClose: function (event, inst) { // Custom event handler },
onClear: function (event, inst) { // Custom event handler },
};
}]);
How it works
Datetime with minimum and maximum valuesDatetime with unselectable values
Credit card expiration picker
Time format
Time picker layout
Customize themes with the theme builder
Responsive controls for phone and tablet
Features
- Date select Set up a targeted picker for selecting dates, with localization min/max and invalids.
- Time select Let people select a time, with time format, steps and further custom options.
- Date and time Combine the date & time selection into one view.
- Wheels Show date and time on a single wheel each or break them out into multiple wheels.
- Date format Control how the date is formatted. Override localization settings if needed.
- Min and max dates Control the boundaries with min and max settings to limit the options.
- Invalids Disable dates one by one, in ranges or by days.
- Circular scrolling Improve the UX by enabling people to easily scroll to the beginning of the month, hour or minutes.
- 12/24 hour format Control the time format. Override localization settings if needed.
- Min and max hours Let the user only pick from available ours by limiting the available options.
- Invalid times Reduce errors by making selections invalid.
- Steps Display times the users are interested in. Every 15 minutes, 30 minutes?
- Localization Support multilingual apps and serve UI with the correct culture settings.
- RTL Support Support right-to-left languages and rendering.
- Cross platform Deliver great cross-platform web and hybrid apps with adaptable themes.
- Fluid UX Provide a native-like experience with smooth animations and refined controls.
- Theming Customize the look and feel of the UI to match your brand and app.
- Display modes Show the controls in the appropriate way for the context. Top, bottom, center, inline and bubble modes available.
- Event handlers Tap into the lifecycle of the UI control by writing custom event handlers.
- Responsive Support phones and tablets with different rendering modes.
- Accessibility Support people with disabilities and right-to-left cultures with WAI-ARIA support, Section 508, and RTL rendering.