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

Question

Is there a way to activate the native HTML5 date picker dropdown on focus of an input element?

Large Input Element:

Large Input[type=date] Element

Currently I can only utilize the calendar on click of an arrow at the far right side of the input element.

Large Input Element Click of Arrow

Large Input[type=date] Element onClick of Arrow

I would like to activate this calendar on focus of the input element.

Here is the code in question.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <style media="screen">
  .form-question {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 0 3rem;
    min-height: 3rem;
  }
  .form-question__title {
    color: #342357;
    font-size: 1.5rem;
    padding: 1rem;
  }
  .input-container {
    border-bottom: solid 2px #333333;
  }
  .input-container input {
    border: none;
    box-sizing: border-box;
    outline: 0;
    padding: .75rem;
    width: 100%;
  }
  </style>
  <body>
    <div class="form-question">
      <div class="form-question__title">
        <span>Effective Date</span>
      </div>
      <div class="input-container">
        <input id="effective-date" type="date" name="effective-date" minlength="1" maxlength="64" placeholder=" " autocomplete="nope" required="required"></input>
        <span class="bar"></span>
      </div>
    </div>
  </body>
</html>

CSS solution preferred but javascript is welcome, please no jQuery.

Thanks in advance!

No browser has exposed API for either styling or manipulating the calendar on the native `input[type="date"]` yet. Also, be aware that some older browsers (e.g. IE) don't have the native date picker and will fallback to the plain text input. Mobile browser will also likely have a different UI (e.g. if you expand the calendar by default on iOS it might take up the entire screen). So I recommend that you either leave the default calendar behavior to the browser, or use some third-party datetime pickers. — Chuanqi Sun, Jul 14 '18 at 04:02
@evenstar Thank you for clarifying! I did find [this](https://stackoverflow.com/a/45461709/9111447), which is essentially the same question and did solve my problem (at least on Chrome). Just make the calendar-picker icon the full height and width of the input! — MJ12358, Jul 14 '18 at 13:58

score 75 · Accepted Answer · edited Aug 31 '20 at 14:34

75

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">

Full-Width Clickable Calendar Dropdown

edited Aug 31 '20 at 14:34

Parzh from Ukraine

7,999
3
34
65

answered Jul 15 '18 at 15:05

MJ12358

1,378
1
9
15

4

Note to anyone using this - you will lose the ability to clear, increment and decrement date fields with this. The [linked answer](https://stackoverflow.com/a/45461709/16387) has some extra styles to allow that. – Wayne Bloss Nov 29 '18 at 19:07
This disables the keyboard input any reason why ?? – Aravind Reddy Jun 30 '21 at 02:58
@AravindReddy I'm unable to replicate the issue. I'm able to tab/shift-tab through the mm/dd/yyyy and enter arbitrary numbers within. Also while the date picker is open I can use the arrow keys move around the dates. Perhaps you could ask a question that details your experiences with code examples and link it here. – MJ12358 Jun 30 '21 at 22:42
see my one line solution below – Abid Khairy Jun 15 '22 at 07:27
1

Not working in Firefox – f0rmat1k Feb 16 '23 at 10:02

score 52 · Answer 2 · answered Jun 15 '22 at 07:26

52

one line solution

<input type="date" onfocus="this.showPicker()">

works on type "time" and "datetime-local" too

answered Jun 15 '22 at 07:26

Abid Khairy

1,198
11
9

1

Great thanks! Any chance to get more control on the picker itself? Like open it at a selected month, or open it on the year selection view? – Augustin Riedinger Aug 25 '22 at 16:48
@AugustinRiedinger no AFAIK, no argument/parameter can be passed to this function, and showPicker() can be used on datalist tag and autocomplete on input text tag, so its too general to have a specific feature. more info https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker – Abid Khairy Aug 28 '22 at 00:07
@AugustinRiedinger but you can manipulate the input value from function like this: document.querySelector('.your-input').value = "2020-03-02"; document.querySelector('.your-input').showPicker(); – Abid Khairy Aug 28 '22 at 00:15
1

Thanks @AbidKhairy for your feedback. Your solution could be helpful in some situation but this implies modifying the actual input value, so this has some concrete implications. And this doesn't work for opening the year selection panel by default. I guess this native feature still need some improvements. – Augustin Riedinger Aug 29 '22 at 07:57
1

I dont find that this works on Safari 15.6 – Jono Mar 01 '23 at 15:26
1

@Jono yes, it only supported from version 16 above. more info https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker#browser_compatibility – Abid Khairy Mar 06 '23 at 14:24

score 3 · Answer 3 · answered Mar 18 '22 at 04:29

3

why not using js to do so

const inputDate = document.getElementById("inputId");

inputDate.addEventListener("focus",function (evt) {
  if (this.getAttribute("type")==="date") {
    this.showPicker();
  }
});

answered Mar 18 '22 at 04:29

Ernesto

3,944
1
14
29

I'm not familiar with `showPicker`. According to [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker) compatilibity is poor. – MJ12358 Mar 18 '22 at 04:52

score 2 · Answer 4 · answered May 27 '21 at 12:13

    input[type="date"] {
        position: relative;
    }

    /* create a new arrow, because we are going to mess up the native one
    see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */
    input[type="date"]:after {
        content: "\25BC"; 
        color: #555;
        padding: 0 5px;
    }

    /* change color of symbol on hover */
    input[type="date"]:hover:after {
        color: #bf1400;
    }

    /* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
    input[type="date"]::-webkit-calendar-picker-indicator {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: auto;
        color: transparent;
        background: transparent;
    }

    /* adjust increase/decrease button */
    input[type="date"]::-webkit-inner-spin-button {
        z-index: 1;
    }

    /* adjust clear button */
    input[type="date"]::-webkit-clear-button {
        z-index: 1;
    }

score 0 · Answer 5 · answered Jun 02 '22 at 11:45

Pimped @MJ12358 solution a bit, so the Icon is preserved.

input {
    position: relative;
}

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

<input type="date" />

score 0 · Answer 6 · answered Jul 25 '23 at 19:17

This answer is to add details to Abid's current answer.

You can use showPicker API to programatically shows a picker from common browser implementations:

Commonly browsers implement it for inputs of these types: "date", "month", "week", "time", "datetime-local", "color", or "file".

document.querySelectorAll("button").forEach((button) => {
  button.addEventListener("click", (event) => {
    const input = event.srcElement.previousElementSibling;
    try {
      input.showPicker();
    } catch (error) {
      window.alert(error);
    }
  });
});

<p>
  <input type="date" />
  <button id="date">Show the date picker</button>
</p>

<p>
  <input type="color" />
  <button id="color">Show the color picker</button>
</p>

<p>
  <input type="file" />
  <button id="file">Show the file picker</button>
</p>

<p>
  <input type="file" style="display: none;" />
  <button id="fileHidden">Show the file picker</button>
</p>

<p>
  <input type="color" style="display: none;" />
  <button id="colorHidden">Show the color picker</button>
</p>

I have also tested with hidden inputs as shown above. The picker still shows up successfully.

Note that there are a few security requirements. Most notably:

Transient user activation is required. The user has to interact with the page or a UI element in order for this feature to work.
As you can see in the above example code, it doesn't work for date input but only here on StackOverflow because it's in an iframe:

Note: Pickers for date, datetime-local, month, time, week are launched in the same way. They cannot be shown here because live examples run in a cross-origin frame, and would cause a SecurityError

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

6 Answers6

Linked

Related