如何使字体真棒图标启动本机浏览器日期选择器

Question

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

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

我怎样才能做到这一点？

Answer 1

因此，这几乎适用于所有当前浏览器，除了桌面版的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>

Answer 2

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

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