Trigger inside of a touch/click event for iOS does not work

I am developing a mobile application, and I want my user to click an image, and for that to open their device's native datetime picker application.

NB: this works fine for android - just not for iOS.

HTML:

<i class="fa fa-clock-o fa-2x" id="datetime_picker"></i>
<label id="new-incident-time-of-incident-label" class="label-datetime" data-field="IncidentDate" style="white-space: nowrap;"></label>
<input id="input" type="datetime-local" style="position: absolute; left: 9999px;"/>

As you can see from the above code, I'm throwing the input far off to the side, for it to stay in the DOM, but not be visible (I tried other things like display: none, visibility: hidden, but that caused other issues). It looks like this:

The label is there to present the value selected in the input when the user clicks the i-element.

So, maybe this seems a bit weird, but it works fine for android devices.
Not so much for iOS.

This is my JS:

$("#datetime_picker").on("touchend", () => {

    $("#input").trigger("click");
});

I played around with combinations of click-, touchend-, touchstart-events, but to no avail.

Here is all of the JS-code, in case it is needed for reference (you never know...):

const $input = $("#input");
let initDone = false;

function setValue(date) {
  $input.val(new XDate(date).toString("yyyy-MM-dd'T'hh:mm"));
  $("#new-incident-time-of-incident-label").text(new XDate(date).toString("yyyy-MM-dd'T'hh:mm"));
}

dsIncident.attachEvent("onDataLoaded", () => {
  if (initDone) {
    return;
  }
  initDone = true;
  const date = dsIncident.currentRow("IncidentDate");
  console.log("Initial date set:", date);
  setValue(date);
});

$("#input").on("input", () => {
  const date = new XDate($input.val())[0];
  console.log("Date changed:", date);
  dsIncident.currentRow("IncidentDate", date);
});

$("#datetime_picker").on("touchend", () => {

    $("#input").trigger("click");
});

> Hiding or displacing the input makes no difference

Okay, but important to at least test that. Sometimes stuff like this does not work because the element was hidden or moved; a browser might for example try and orient the popup position on the position of the input field itself.

You could try and position the input field so that the part of it that triggers the popup when clicked, gets to sit behind your "clock" icon that is supposed to trigger this. pointer-events: none on the icon itself (so that the click/tap can pass through it), and the input field itself "hidden" with opacity: .01 or something. (Not opacity: 0, that often triggers issues with the element not "being interactable with" at all again.)