ionic-durationpicker

• Description
• Usage
• Configuration
• Improvements
• Contact

---

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

Ionic.io Market

Usage:

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

   bower install ionic-durationpicker --save
   

2. Include it in your index.html file:

   <script src="lib/ionic-durationpicker/dist/ionic-durationpicker.min.js"></script>

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

   angular.module('myApp', ['ionic', 'ionic-durationpicker']);

4. You may use it immediately in your templates with the default configuration:

   <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:

   

   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:

   

   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:

   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:

   <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:

   

   And your popup becomes:

   

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):

Property	Type (Default Value)	Description
rtl	Boolean (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.
inputButtonType	String ('button-outline button-positive')	CSS class(es) for the button that shows the popup.
format	String ('MM:SS', 'HH:MM:SS' or 'DD:HH:MM:SS')	Duration Format.
secondsStep	Number (1)	Amount to increment/decrement seconds by on popup control arrow clicks.
minutesStep	Number (1)	Amount to increment/decrement minutes by on popup control arrow clicks.
popupTitle	String ('Duration Picker')	Title for the $ionicPopup.
popupSubTitle	String ('Enter duration')	Sub Title.
popupSaveLabel	String ('Save')	Label for the save button.
popupSaveButtonType	String ('button-positive')	CSS class(es) for the save button.
popupCancelLabel	String ('Cancel')	Label for the cancel button.
popupCancelButtonType	String ('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.