Open HTML5 date picker inside input box click

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

@AlwaysHelping Pls check this fiddle that I've created jsfiddle.net/mailmrmanoj/rL1ecp9w/5 — forgottofly
@forgottofly in your jsfiddle, when i click on input box or icon only alert is pop up, not opening any date picker? is this your problem? or else? — GaurangDhorda
Yes.. You can remove the alert function and try clicking inside the text box which should open the datepicker.But it's not opening.. — forgottofly
@forgottofly stackblitz.com/edit/… Does this solve your problem — GaurangDhorda

Bhargav Patel Bhargav Patel · Accepted Answer · 2020-07-06T06:33:17

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

Open HTML5 date picker inside input box click

1 Answers