时间戳

首页 > 解决方案 > 在输入框内打开 HTML5 日期选择器点击

javascript - 在输入框内打开 HTML5 日期选择器点击

问题描述

我正在尝试使用以下代码在输入文本框中单击时打开 HTML5 日期选择器，但它没有按预期工作。

但是，单击日历图标会打开日期选择器（默认情况下）。这是在我的 Angular 7 应用程序中。

小提琴：https ://jsfiddle.net/mailmrmanoj/rL1ecp9w/5/

HTML：

<input
  type="date"
  name="startDate"
  id="datePick"
  (click)="openDP()"
  class="input--small"
/>

打字稿：

declare var $;

openDP() {           
  $('#datePick').datepicker('show');
}

我的代码有什么问题吗？

日期选择器参考：https ://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_date

标签： javascriptjqueryangulardatedatepicker

解决方案

尝试使用输入type="text"而不是type="date"焦点事件调用函数“openDP”。

<input name="date" type="text" (focus)="focusFunction()" (focusout)="focusOutFunction()">

注意： 您还可以使用 angularjs-datepicker 代替默认的 HTML5 日期选择器，因为type="date"Safari 或 Internet Explorer 11（或更早版本）不支持。

推荐阅读