Ionic Durationpicker

Ionic Durationpicker

Customizable list item and popup for duration inputs

$0.00

Khaled Shaaban

Khaled Shaaban

Member since 2015

Details

Version:
0.2.0
Ionic:
1.x  
Platforms:
iOS, Android  
Released:
4 years ago
Updated:
4 years ago
Category:
Plugins
Tags:
,

ionic-durationpicker


Description:

This ionic plugin provides you with a customizable $ionicPopup to show to your users whenever you need them to input a duration. The plugin will convert the duration into seconds, and then store it in a variable of your choosing.

I couldn't find an existing plugin to handle duration inputs, but this was largely inspired by rajeshwarpatlolla's / ionic-timepicker (GitHub) | Ionic.io Market

Links

CodePen Demo

GitHub Repo

Usage:

  1. Install the plugin into your ionic project using bower:

    bower install ionic-durationpicker --save

  2. Include it in your index.html file:

    ```html

``` 3. Inject ionic-durationpicker as a dependency for your angular module:

js angular.module('myApp', ['ionic', 'ionic-durationpicker']); 4. You may use it immediately in your templates with the default configuration:

html <ionic-durationpicker idp-label="Mile Run Duration" idp-label-icon="ion-clock" idp-output="durations.mileRun"> </ionic-durationpicker>

idp-label is the string that labels the generated ion-item. If you would like to include an ionicon in your ion-item, then you can pass the icon name into idp-label-icon. And the variable you pass into idp-output will be used to store the duration input in seconds format. You may also use it to initialize a duration from an integer representing a number of seconds. Be wary though, currently there are no checks against what's already in that variable.

For example, if your $scope.durations.mileRun had a value of 527, then the above snippet will result with:

ion-item default configuration screenshot Note 1: Make sure you pass an object property into idp-output , otherwise the duration will not persist because of the way two-way data binding works with primitive datatypes (integers representing the duration in this case).

Note 2: See Configuration section below to configure this ion-item. 5. If a user taps on the duration button, they get the following popup:

ionicPopup default configuration screenshot The control arrows listen to on-hold / on-release events in addition to ng-click. 6. You can also create a configuration object in your controller:

```js angular .module('myApp') .controller('myController', ['$scope', function($scope) { $scope.durations = { mileRun: 527 };

   $scope.mileRunConfig = {
     inputButtonType: 'button-assertive',
     popupTitle: 'Mile Run duration',
     popupSubTitle: 'How long does it take you to run one mile?',
     popupSaveLabel: 'Set',
     popupSaveButtonType: 'button-outline button-balanced',
     popupCancelLabel: 'Close',
     popupCancelButtonType: 'button-outline button-assertive'
   };
 });

```

Then pass it into the plugin's directive:

html <ionic-durationpicker idp-label="Mile Run Duration" idp-label-icon="ion-clock" idp-config="mileRunConfig" idp-output="durations.mileRun"> </ionic-durationpicker>

And you'll get this ion-item:

ion-item custom configuration screenshot And your popup becomes:

ionicPopup custom configuration screenshot

Configuration

You can configure the plugin by passing an object containing any of the following properties to the idp-config attribute of the <ionic-durationpicker> directive (Note: properties not modified will take their default values):

PropertyType (*Default Value*)Description
rtlBoolean (*false*)For Right-to-left languages, flips the button to the left and pulls the label to the right along with the icon in the generated `ion-item`.
inputButtonTypeString (*'button-outline button-positive'*)CSS class(es) for the button that shows the popup.
formatString (*'MM:SS'*)Duration Format. Supports `'MM:SS'` , `'HH:MM:SS'`, or `'DD:HH:MM:SS'`. If anything else is passed here it reverts back to the default.
secondsStepNumber (*1*)Amount to increment/decrement seconds by on popup control arrow clicks.
minutesStepNumber (*1*)Amount to increment/decrement minutes by on popup control arrow clicks.
hoursStepNumber (*1*)Amount to increment/decrement hours by on popup control arrow clicks.
daysStepNumber (*1*)Amount to increment/decrement days by on popup control arrow clicks.
popupTitleString (*'Duration Picker'*)Title for the `$ionicPopup`.
popupSubTitleString (*'Enter duration'*)Sub Title.
popupSaveLabelString (*'Save'*)Label for the save button.
popupSaveButtonTypeString (*'button-positive'*)CSS class(es) for the save button.
popupCancelLabelString (*'Cancel'*)Label for the cancel button.
popupCancelButtonTypeString (*'button-stable'*)CSS class(es) for the cancel button.

Improvements

  • Add a configurable max limit and force the full duration value to be under that limit.

Contact

For issues with this plugin, feel free to open an issue on GitHub. You could also reach out to me directly on Twitter!

License

Code released under the MIT license (MIT):

Copyright (c) 2016 Khaled Shaaban

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.