TimePickerForIonicFramework icon indicating copy to clipboard operation
TimePickerForIonicFramework copied to clipboard

Incompatible ionic list with multiple ionic-timepicker

Open dtelaroli opened this issue 9 years ago • 1 comments

Inside the list component it's not possible use two components, because ionic bind the line click event to first button. So, if use two timepicker, just first is clicable.

Can you help-me?

<div class="list card">
          <label class="item item-input item-time-content">
            <span class="input-label">Start/End</span>
            <ionic-timepicker input-obj="timeStartObj" class="item-time">
              <button class="button button-light">
                <standard-time-no-meridian etime='timeStartObj.inputEpochTime'></standard-time-no-meridian>
              </button>
            </ionic-timepicker>
            <span class="item-time separator">/</span>
            <ionic-timepicker input-obj="timeFinalObj" class="item-time">
              <button class="button button-light">
                <standard-time-no-meridian etime='timeFinalObj.inputEpochTime'></standard-time-no-meridian>
              </button>
            </ionic-timepicker>
          </label>
        </div>
$scope.timeStartObj = {
    inputEpochTime: new Date(0, 0, 0, 9).getHours() * 60 * 60,
    step: 10,
    format: 24,
    callback: function(val) {
      if(val !== undefined) {
        $scope.timeStartObj.inputEpochTime = val;
      }
    }
  };

  $scope.timeEndObj = {
    inputEpochTime: new Date(0, 0, 0, 19).getHours() * 60 * 60,
    step: 10,
    format: 24,
    callback: function(val) {
      if(val !== undefined) {
        $scope.timeEndObj.inputEpochTime = val;
      }
    }
  };

dtelaroli avatar Nov 13 '15 21:11 dtelaroli

I discover a workaround, changing the label to div, ionic doesn't bind line click.

     <div class="list card">
          <div class="item item-input item-time-content"> <!-- DIV HERE-->
            <span class="input-label">Start/End</span>
            <ionic-timepicker input-obj="timeStartObj" class="item-time">
              <button class="button button-light">
                <standard-time-no-meridian etime='timeStartObj.inputEpochTime'></standard-time-no-meridian>
              </button>
            </ionic-timepicker>
            <span class="item-time separator">/</span>
            <ionic-timepicker input-obj="timeFinalObj" class="item-time">
              <button class="button button-light">
                <standard-time-no-meridian etime='timeFinalObj.inputEpochTime'></standard-time-no-meridian>
              </button>
            </ionic-timepicker>
          </div> <!-- DIV HERE-->
        </div>

If doesn't have other solution we can close it.

dtelaroli avatar Nov 13 '15 21:11 dtelaroli