0
304
ViewsTrigger Chrome and Edge native datepicker by clicking anywhere in input
Clicking on the circled icon brings up the date picker for Chrome and Edge, but my computer illiterate test users don't know where to click and complain it doesn't work.
Is there a way to make the date picker show up when clicking anywhere on the input box?
I have tried the method outlined here, but it doesn't work. I am using the latest Chrome/Edge Browser and Bootstrap 4.6.
Here is the HTML for my input field:
<div class="form-group col-md-3 col-sm-12">
<label class="control-label" for="Date">Date:</label>
<input id="Date" type="date" class="form-control picker" name="Date" value="" />
</div>
Many thanks to Firefox for doing this by default.
1 answers
Answer question0
I could not trigger the calender from js (my original thought), so I made a (hacky) solution where I use css to resize the calendar target area and then place it over the entire input area. scaleX(-1) is to flip it so the calendar icon stays on the left. I put a red border around the calendar area so you can see it.
<html>
<head>
<style>
#Date::-webkit-calendar-picker-indicator {
position: absolute;
left: 50;
transform:scaleX(-1);
top: 10px;
width: 95px;
margin: 0;
padding: 0;
cursor: pointer;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="form-group col-md-3 col-sm-12">
<label class="control-label" for="Date">Date:</label>
<input id="Date" type="date" class="form-control picker" name="Date" value="" />
</div>
</body>
</html>