Detecting Clicks on HTML "Date" Input

April 3, 2023

I am building a webpage that counts user clicks to determine the most efficient types of interactive elements. To make it easier to determine the results, I’m making the page count user clicks.

One element I’m testing is a date picker, and for some reason my code doesn’t count clicks within the date picker. Here is my HTML:

<div class="inputTile" id="leftInputTile">
                <label for="start">Input Today's Date:</label>
                <input type="date" id="start" name="trip-start" value="2018-07-22" min="1900-01-01" max="2023-12-31"><br><br>
</div>

and my associated javascript:

let leftInputTile = document.getElementById("leftInputTile");
let leftInputClickCount = 0;

function countClicksInLeft() {
    leftInputClickCount++;
    console.log("left click " + leftInputClickCount);
}

leftInputTile.addEventListener('click', countClicksInLeft);

This counts all clicks within the element, but clicks inside of the open date picker See here aren’t counted.

I’m not quite sure how to proceed and so far haven’t found other documentation on this.
Pure JS solutions would be preferable please.

>Solution :

Unfortunately, the built in calendar control isn’t a DOM element and doesn’t trigger events. It’s part of the browser and is implemented opaquely by different browsers and on different operating systems, in the same way as the Alert or Save As dialogs. If that’s not acceptible, consider using a JavaScript-based calendar control instead.