DateTime Picker Hours Minutes (ex 3 hours 10 minutes)

Ionic Framework ionic-v3
1

Hello,

I’m working a time duration picker.

  <ion-item>
    <ion-label primary stacked>How long do you think it'll take?</ion-label>
    <ion-datetime displayFormat="hh:mm" [(ngModel)]="duration"></ion-datetime>
  </ion-item>

How would I go about helping the user understand they are choosing hours and minutes?

Ideally, I would like to have extra columns in the picker like “hours” and “minutes” or at least column headings. When they submit the clicker, it’d be nice for it to say “3 Hours 10 Minutes” or whatever.

Thanks!

2

I figured it out!

`
import { Injectable } from ‘@angular/core’;
import { NavController, Picker } from ‘ionic-angular’;
import * as moment from ‘moment’;

@Injectable()
export class DurationPicker {

getDuration: any;

constructor(public nav: NavController) {

}

createDuration(): Promise {

let picker = Picker.create();
let optionHours = [];
let optionMinutes = [];
let duration;
let durationObject;

return new Promise (resolve => {

//values for Hours
for (let i = 0; i <= 23; i++){
  optionHours.push({
    value: i,
    text: i.toString()
  })
};

let columnHours = {
  columnWidth: '5%',
  options: optionHours
};


//values for Minutes
for (let i = 0; i <= 59; i++){
  optionMinutes.push({
    value: i,
    text: i.toString()
  })
};

let columnMinutes = {
  columnWidth: '5%',
  options: optionMinutes
};

let hoursText = {
  columnWidth: '25%',
  options: ['hours']
}

let minutesText = {
  columnWidth: '25%',
  options: ['minutes']
}

picker.addColumn(columnHours);
picker.addColumn(hoursText);
picker.addColumn(columnMinutes);
picker.addColumn(minutesText);

picker.addButton('Cancel');
picker.addButton({
  text: 'Ok',
  handler: () => {

    duration = picker.getColumns();

    durationObject = moment.duration({
      minutes: duration[2].selectedIndex,
      hours: duration[0].selectedIndex
    }).toISOString();

    resolve(durationObject);

  }
});

this.nav.present(picker);

});

}

}

`

1 Like
3

Hi, Thanks for the code snippet. Can you share the html code as well where this is called?

TIA