我正在开发一个移动应用程序,我希望我的用户单击一个图像,然后打开他们设备的本地日期时间选择器应用程序。
注意:这对android很好,但对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;"/>
正如您从上面的代码中看到的,我将输入远远抛到一边,使其留在DOM中,但不可见(我尝试了其他方法,如display: none、visibility: hidden,但这导致了其他问题)。
当用户单击i-元素时,label用于显示input中选择的值。
所以,也许这看起来有点奇怪,但它在android设备上运行良好。在iOS上则不太正常。
这是我的JS:
$("#datetime_picker").on("touchend", () => {
$("#input").trigger("click");
});
我玩了click-、touchend-和touchstart-事件的组合,但没有效果。
以下是所有的JS代码,以防需要参考(你永远不知道…):
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");
});