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

Question

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

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