Open Html5 Date Picker on Icon Click

Open html5 datepicker on input click

This works for me.
It is the answer that i had seen before but did not find.

How To Open HTML Date Picker Dialog On Click Anywhere Inside Input?

This should do it (without js!) when the field is clicked; when it is first focused it listens only for input, but you could workaround with js.

input#session-date {
    display: inline-block;
    position: relative;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

Note: You'll lose the icon using this method, but you could definitely add one:

Here's the demo on codepen

How to open Datepicker dialog box on click of input box not icon or arrow

Note that input type="date" is not supported in Safari or Internet Explorer 11 and earlier versions, so I wouldn't recommend using that - see this link https://caniuse.com/#search=date

Here is a simple example using the Bootstrap Datepicker that is cross-browser compatible

JSFiddle Demo

$(document).ready(function() {    $('input[id="js-date"]').datepicker();});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css">
<h3>Bootstrap datepicker demo</h3>
<div class="input-group date">  <label for="js-date">Date:</label>  <input type="text" class="form-control" id="js-date"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

How to show calendar popup when input[type="date"] is on focus

For anyone who stumbles across this, I solved it (~~webkit only~~ firefox also seems to respect this) by making the calendar-picker-indicator the full height and width of the input, as outlined here.

.input-container input {
    border: none;
    box-sizing: border-box;
    outline: 0;
    padding: .75rem;
    position: relative;
    width: 100%;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

<input type="date">

input type=date then datepicker Icon is not appearing on Firefox

I'm able to resolve datepicker icon disappear in input textbox when we use input type="date". It works in Chrome, Firefox, Edge.
Below are the css I have used and applied those on divs

 .cal-wrp {
    position: relative;
    background-color: white;
    margin-bottom: 16px;
 }

.btnCal-wrp {
    display: inline-block;
    width: 100%;
    position: relative;
    z-index: 10;
}

.btnCal-click {
    border: 0.0625rem solid #cfd0d3;
    background-color: transparent;
    width: 100%;
    padding: 0.75rem;
    cursor: pointer;
    border-radius: 0;
    font-size: 0.875rem;
    line-height: 1.4;
}

    .btnCal-click::-webkit-calendar-picker-indicator {
        right: -10px;
        position: absolute;
        width: 78px;
        height: 40px;
        color: rgba(204, 204, 204, 0);
        opacity: 0;
    }

    .btnCal-click::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    .btnCal-click::-webkit-clear-button {
        margin-right: 75px;
    }

.btnCal {
    background: transparent;
    border: none;
    color: black;
    padding: 13px;
    position: absolute;
    right: 0;
    top: 0;
}

Calendar textbox code:

<div class="cal-wrp">
   <div class="btnCal-wrp">
        <input class="btnCal-click" type="date" required>
   </div>
   <button class="btnCal"><span class="fa fa-calendar"></span></button>
</div>