Trigger Chrome and Edge native datepicker by clicking anywhere in input

Question

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.

Does this answer your question? [How to show calendar popup when input\[type="date"\] is on focus](https://stackoverflow.com/questions/51334960/how-to-show-calendar-popup-when-inputtype-date-is-on-focus) — Heretic Monkey, Nov 19 '21 at 21:50
It's a css hack similar to the answer I ended up with, and it's not cross browser. He specifically mentioned supporting Edge. I'm sure the hack could be extended, but I think he'd be better off with a different datepicker. — Chris Strickland, Nov 20 '21 at 04:35

Chris Strickland · Answer 1 · 2021-11-19T21:52:31.817

2

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>

edited Nov 19 '21 at 21:52

answered Nov 19 '21 at 20:52

Chris Strickland

3,388
1
16
18

What is the datepicker invocation for Chrome/Edge? I just have the date input field. – N.MORR Nov 19 '21 at 21:06
Hold on. I'm reading the documentation. I was under the impression that the invocation was exposed, but it may not be. I figured that out when I tried to edit the answer to just trigger the picker. Give me about 15 minutes and if I haven't got it I'll delete the answer. – Chris Strickland Nov 19 '21 at 21:10
Ok, I could not trigger the event from code. Here is a solution where I use css to resize the calender target area and place it over the box. I put a red border around it so you can see it. It's kind of hacky. For one thing, you can't enter a date manually. Sorry. I will keep looking at this. – Chris Strickland Nov 19 '21 at 21:40
That definitely works for Chrome. Unfortunately, it does nothing on Edge. For now, I have a hacky popup giving Edge users explicit instructions to click the icon. – N.MORR Nov 19 '21 at 22:05
It is definitely not optimal. All of the solutions (I've seen about 20+) rely on css hacks. You can probably make it support Edge/Firefox/etc if you try, but I will see what I can figure out on a non-css option. Problem is the implementation is browser specific and exposes very few methods. – Chris Strickland Nov 19 '21 at 22:12
you could implement a different datepicker (jquery datetimepicker for instance) and could invoke that through code, but it sucks to have to load a library just for this. – Chris Strickland Nov 19 '21 at 22:19
I guess I'll go looking for 3rd party datepickers, then. – N.MORR Nov 19 '21 at 22:53

Trigger Chrome and Edge native datepicker by clicking anywhere in input

1 Answers1