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 AndroidControls for Windows PhoneLocalization 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 valuesCredit card expiration pickerTime formatTime picker layoutCustomize themes with the theme builderResponsive 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.

Visit the website for all details and start a free trial