Ionic date and time picker Mobiscroll

Ionic date and time picker Mobiscroll

Date time picker with validation, min max, native UX and customization options.

$95.00

Levi Kovacs

Levi Kovacs

Member since 2014

Details

Version:
4.2.4
Ionic:
4.x  
Platforms:
iOS, Android  
Released:
4 years ago
Updated:
1 year ago
Category:
Plugins
Tags:
date, time, datetime, scroller, picker,

Mobiscroll Date & Time

The mobile picker control which perfectly fits into your workflow

Mobile Date & Time Picker ControlWorks across the web and hybrid apps.START FREE TRIAL

Overview

Controls for iOSControls for iOSControls for AndroidControls for AndroidControls for Windows PhoneControls for Windows PhoneLocalization optionsLocalization optionsSTART FREE TRIAL

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 min & max valuesDatetime with unselectable valuesDatetime with invalidsCredit card expiration pickerCC Expiry pickerTime formatTime formatTime picker layoutTime wheelsCustomize themes with the theme builderTheme builderResponsive controls for phone and tabletResponsive date picker

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

Ask Me anything