Open HTML5 date picker inside input box click

问题

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.

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

Fiddle: https://jsfiddle.net/mailmrmanoj/rL1ecp9w/5/

HTML:

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

Typescript:

declare var $;

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

Is there anything wrong with my code?

Reference for the date picker: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_date

回答1:

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()">

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).

来源：https://stackoverflow.com/questions/62749795/open-html5-date-picker-inside-input-box-click