在输入框中打开HTML5日期选择器，然后单击 [英] Open HTML5 date picker inside input box click

问题描述

我正在尝试使用以下代码在输入文本框内单击时打开HTML5日期选择器，但它无法正常工作.

I'm trying to open a HTML5 date picker on click inside an input text box using the below code, but it is not working as expected.

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

However, clicking on the calendar icon does open the date picker (by default). This is inside my Angular 7 application.

提琴: 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');
}

我的代码有什么问题吗?

Is there anything wrong with my code?

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

推荐答案

尝试使用输入type="text"而不是type="date"并关注事件调用函数"openDP".

Try with input type="text" instead of type="date" and on focus event call function "openDP".

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

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

Note: You can also use angularjs-datepicker instead of default HTML5 date picker as type="date" is not supported in Safari or Internet Explorer 11 (or earlier).

这篇关于在输入框中打开HTML5日期选择器，然后单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！