angularuser-interfacedatetimepickertimepicker

How can I make a time picker in angular like ios?

I have to implement a time picker in angular with the format or look of those of ios in angular and i dont know where to start!

For example: https://i.sstatic.net/NNCRv.png

Or something like: https://stackblitz.com/github/IgniteUI/igniteui-live-editing-samples/tree/master/angular-demos/scheduling/timepicker-sample-5

Solution

  • how to identify of the 5 that are present the number that is in the middle?

    You can compute the current position based on the window:scroll event as follows:

      @HostListener("window:scroll", ['$event'])
  handleHHScroll(event) {
    this.hhValue = this.getValueByPosition(event.target.scrollTop, 'hh');
    this.hhScroll$.next(this.hhValue);
  }

  getValueByPosition(y, type) {
    let arr = type === 'hh' ? this.hhArray : this.mmArray;
    let index = Math.floor((y+17)/33);
    if(index < 0) index = 0;
    if(index >= arr.length) index = arr.length -1;
    return arr[index];
  }

    Based on the current position you can compute the before and after part and render it on the UI

    Theres already an existing implementation at https://github.com/asdftu/ng-time-picker, see if that helps.