Question

93

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

rated 0 times [ 94] [ 1] / answers: 1 / hits: 9632 / 3 Years ago, mon, april 26, 2021, 12:00:00

The default HTML input (code below) with type=date will display a date picker input.

However the date picker dialog only opens when you click on the calendar icon at the far right of the input.

If you click anywhere else in the input the dialog DOES NOT open.

How can you enable the input to open the date picker dialog when you click anywhere inside the input?

Note: I have already searched similar problems on Stack overflow for answers and on the internet but I did not get a proper solution.

<label for="session-date">Start date:</label>



<input type="date" id="session-date" name="session-date">

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mckaylab

Add To Favorites

Follow

Total Points: 311

Total Questions: 120

Total Answers: 93

Location: Montenegro

Member since Thu, Jun 16, 2022

2 Years ago

mckaylab questions

1 How to use Material UI custom variants in React with Typescript

Fri, Apr 8, 22, 00:00, 2 Years ago

1 TypeError: Cannot read properties of undefined (reading 'forEach') at Object.< anonymous> (/home/runner/myrepl/index.js:10:6

Mon, Apr 4, 22, 00:00, 2 Years ago

1 How to use the AbortController to cancel Promises in React?

Wed, Dec 1, 21, 00:00, 3 Years ago

1 How to change selenium-standalone port number via webdriverio wdio file?

Wed, Jul 24, 19, 00:00, 5 Years ago

1 Assert sorting in an table using Cypress

Thu, Jun 27, 19, 00:00, 5 Years ago

View All

answered 3 Years ago dawnc · Accepted Answer

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