如何使 Font Awesome Icon 启动本机浏览器日期选择器？

Question

我有一个日期输入，旁边有一个很棒的字体。 如何使字体 Awesome Icon Launches 成为默认浏览器日期选择器？

<input type="date">
<span (click)="launchHereDatePicker()" class="fa fa-search facturas col-sm-1 "></span>

我怎么能做到这一点？

Answer 1

大多数浏览器会尝试关注表单控件。 在这种情况下，我将图标包装在for日期元素的 label 中。 这样浏览器就知道要关注什么了。 不幸的是，截至目前，Chrome 78 将集中控制但不会打开日期选择器，因此这不是所有浏览器的完美解决方案，但可能足以满足您的需求。

 <input id="date" type="date"> <label for="date"> <span class="fa fa-search facturas col-sm-1">icon</span> </label>

Answer 2

因此，这适用于几乎所有当前的浏览器，桌面版 Chrome 除外。

参考

• 是否有 JavaScript 方法可以使 html 日期输入显示日期选择器？
• 在 Chrome 中显示本机日期选择器的方法

 addEventListeners('.facturas', 'click', launchDatePicker); function launchDatePicker(e) { let input = e.target.previousElementSibling; input.focus(); input.click(); // or you can just call this instead... openPicker(input); } function addEventListeners(elements, eventName, handler) { if (typeof elements === 'string') elements = document.querySelectorAll(elements); Array.from(elements).forEach(el => el.addEventListener(eventName, handler)); } function openPicker(inputDateElement) { let event = document.createEvent('KeyboardEvent'); event.initKeyboardEvent('keydown', true, true, document.defaultView, 'F4', 0); inputDateElement.dispatchEvent(event); }

 .facturas { cursor: pointer; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" /> <form> <input name="some-date" type="date" /> <span class="fa fa-search facturas col-sm-1"></span> </form>