TimePickerForIonicFramework
TimePickerForIonicFramework copied to clipboard
Incompatible ionic list with multiple ionic-timepicker
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;
}
}
};
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.