javascript - 如何在无需单击选择器指示器的情况下显示 HTML5 日期时间选择器？

Question

我正在使用 html5 日期时间选择器，希望当您单击输入字段上的任意位置时显示日期弹出窗口，而不是被迫单击小箭头。我怎样才能做到这一点？

这里的问题表明这是可以做到的。通过问题上的链接运行代码或在答案上运行代码片段。单击输入字段将打开弹出窗口。 how to style html5 date input, first element focus/active

::-webkit-inner-spin-button {
  display: none;
}
 ::-webkit-datetime-edit-text {
  background: none;
}
 ::-webkit-datetime-edit-month-field {
  background: none;
}
 ::-webkit-datetime-edit-day-field {
  background: none;
}
 ::-webkit-datetime-edit-year-field {
  background: none;
}
 ::-webkit-datetime-edit-text:focus {
  background: rgba(255, 255, 255, 0.5);
}
 ::-webkit-datetime-edit-month-field:focus {
  background: rgba(255, 255, 255, 0.5);
}
 ::-webkit-datetime-edit-day-field:focus {
  background: rgba(255, 255, 255, 0.5);
}
 ::-webkit-datetime-edit-year-field:focus {
  background: rgba(255, 255, 255, 0.5);
}
 ::-webkit-clear-button {
  display: none;
  -webkit-appearance: none;
}
 ::-webkit-calendar-picker-indicator {
  background: none;
}

<input [(ngModel)]="data.value.date_of_visit" id="selectedDate" type="date" name="date_of_visit" class="form-control date-filter pseudo-input live-update" placeholder="Event Date" value="2013-01-08" formControlName="date_of_visit" aria-describedby="inputSuccess2Status"
style="line-height: 20px;">

非常感谢任何帮助!

Answer 1

在 onfocus 上触发 F4 键盘事件

function showCal(element) {
   var event = document.createEvent('KeyboardEvent');
   event.initKeyboardEvent('keydown', true, true, document.defaultView, 'F4', 0);
   element.dispatchEvent(event);
}

将此函数与onfocus事件绑定(bind)