Method to show native datepicker in Chrome

Question

I use <input type="date"> fields that gracefully fallback to jQuery when the browser does not have support for the field. Relatively recently, Chrome started offering a native date picker, which is great. But I have found that many users miss the little arrow that brings up the calendar and therefore miss the fact that there is an easy calendar for date selection.

Chrome Native Date Picker

To make this more intuitive, it would be great if I could bring up the native datepicker UI when the user moves the focus to the input or clicks another element (like a small calendar icon).

Is there a method that I can use in Chrome to trigger the datepicker UI?

if you are asking that I want to get rid of that carrot icon, then I think that is impossible. — defau1t, Mar 20 '13 at 17:49
@defau1t you CAN get rid of the arrows with some CSS, but I don't think that's what's being asked. Although to be more consistent, one could probably hide the arrows and fire the native event when the user clicks the calendar. — mafafu, Mar 20 '13 at 17:53
I don't know that you can trigger the native date picker to open, but there might be a setting to tell it to open by default? — Jared Farrish, Mar 20 '13 at 18:06
Related https://stackoverflow.com/questions/14946091/are-there-any-style-options-for-the-html5-date-picker — TylerH, Apr 13 '22 at 15:37

Andy · Answer 1 · 2018-02-16T23:25:29.190

71

Here is a way to trigger the datepicker when users click on the field itself, because computer illiterate users don't know where they should click:

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;
 }

<input type="date">

Links:

edited Feb 16 '18 at 23:25

answered Aug 02 '17 at 13:05

Andy

2,892
2
26
33

If you do it like this you lose the functionality of the little up/down buttons. – Postlagerkarte Feb 09 '18 at 14:02
@Postlagerkarte That is why i described how to get them working again below the snippet. The snippet is there to give you an idea and you should adjust it to your needs. – Andy Feb 16 '18 at 22:31
I have adjusted the snippet so it supports the clear, up and down buttons. – Andy Feb 16 '18 at 23:05
@Andy when we open data-picker dialog clicking on input area, at the same time how can we able to write into input while opening the picker at a time. – Developer Jul 06 '20 at 09:19
1

@GaurangDhorda In some browsers you can only type while the native datepicker is closed, so you can click on the left part to not open the datepicker to type or increase the value of `left` in `input[type="date"]::-webkit-calendar-picker-indicator {`, but that takes away the whole purpose of my answer, to cover the field to open the datepicker. – Andy Jul 06 '20 at 14:56
@Andy Thank you. Can it would be possible as we type in input at the same time date picker is opened and changed according to date and month and year of what we tying in input – Developer Jul 06 '20 at 15:23
@Postlagerkarte sorry to answer to an old question, but what you mean with "If you do it like this you lose the functionality of the little up/down buttons"? – Giacomo M Aug 03 '20 at 15:13
@GiacomoM because the css makes the indicator transparent and if you stretch it over the field all the way it covers all the small buttons, making them unclickable. – Andy Aug 05 '20 at 11:03
@Andy these css rules are for date inputs. Date inputs don't have small buttons on the right. Or I am missing something? – Giacomo M Aug 05 '20 at 11:13
@GiacomoM it only works in specific browsers ¯\\_(ツ)_/¯ as you can see this question and answer is about google chrome which have built in native datepicker. When u want to support other browsers u probably want to use a plugin. – Andy Aug 11 '20 at 13:33
There seems to have been a breaking change in chrome, causing the icon to no longer be right aligned. Using position absolute fixed it for me, but YMMV: `input[type="date"]:after {...; padding: 0.5rem 1rem; position: absolute; top: 0; right: 0;}` – appel Mar 12 '23 at 17:28

score 24 · Answer 2 · edited May 23 '17 at 10:30

I don't think you can trigger the native calendar control to display, but you could highlight it a bit more:

input[type="date"]:hover::-webkit-calendar-picker-indicator {
  color: red;
}
input[type="date"]:hover:after {
  content: " Date Picker ";
  color: #555;
  padding-right: 5px;
}
input[type="date"]::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0;
}

<input type="date" />

You can, as it is, prevent it from displaying, e.g, from the docs:

You can disable the native calendar picker by the following code:

<style>
::-webkit-calendar-picker-indicator {
    display: none;
}
</style>
<input type=date id=dateInput>
<script>
dateInput.addEventListener('keydown', function(event) {
    if (event.keyIdentifier == "Down") {
        event.preventDefault()
    }
}, false);
</script>

Here's the documentation from Webkit, where I got the above:

http://trac.webkit.org/wiki/Styling%20Form%20Controls

Maybe that can be torqued and made to display the date picker, but ask yourself if you'd like every calendar control flying out every time you roamed your mouse across a page?

This answer was also helpful:

https://stackoverflow.com/a/15107073/451969

there is way to do it - see my answer – Michał Šrajer Jun 17 '15 at 14:59 — Michał Šrajer, Jun 17 '15 at 14:59
@MichałŠrajer not anymore – Fr0zenFyr Feb 15 '19 at 07:22 — Fr0zenFyr, Feb 15 '19 at 07:22

Madacol · Answer 3 · 2020-08-04T03:06:02.333

Edit 2020: It seems there was a change in chrome, and previous answers do not work anymore.

I made a hacky workaround that you can tune to your needs.

This new method increases size of the calendar icon to overflow it's input container in order to completely cover it. You can tune the position and size by tuning these parameters:

  top: -150%;
  left: -150%;
  width: 300%;
  height: 300%;

The bigger, the more stable. But still a hack on top of a hack

Updated July 2020 - Works with new Chrome's calendar-picker

label {
  display: inline-block;
  position: relative;
  line-height: 0;
}
input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
  cursor: pointer;
}
input::-webkit-calendar-picker-indicator {
  position: absolute;
  top: -150%;
  left: -150%;
  width: 300%;
  height: 300%;
  cursor: pointer;
}
input:hover + button {
  background-color: silver;
}

<label>
  <input type="date">
  <button id="calendar_text">Search Date </button>
</label>

There's still an issue in Firefox, when a date is selected and you click near the right border, the input will clear, because the input's clear button is right there.

I adapted cinatic's solution so that it works on Chrome, and adapted Andy's trick to the recent changes of Chrome in 2020

Andy's trick: expands Chrome's datepicker's arrow through out the input

cinatic's solution: hides the input on top of another element

thanks for your answer, I've proposed a corrected version to get rid of the firefox issue. — malko, Sep 30 '21 at 16:31
You should set tabindex="-1" on the input element to avoid it getting the focus when someone uses keyboard navigation (TAB key) — epos_jk, Feb 23 '22 at 15:57

zmag · Answer 4 · 2020-12-04T06:20:24.760

Referencing Andy's answer, I made whole area clickable and just removed the calendar icon.

The result in Andy's snippet has small area on the left that is not clickable. (Chrome 87.0.4280.66)

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

input.picker[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  color: transparent;
  background: transparent;
}

<input class="picker" type="date">

score 15 · Answer 5 · answered Jun 17 '15 at 14:54

15

The trick is to fire F4 KeyboardEvent on input element:

function openPicker(inputDateElem) {
    var ev = document.createEvent('KeyboardEvent');
    ev.initKeyboardEvent('keydown', true, true, document.defaultView, 'F4', 0);
    inputDateElem.dispatchEvent(ev);
}

var cal = document.querySelector('#cal');
cal.focus();
openPicker(cal);

here is jsfiddle: http://jsfiddle.net/v2d0vzrr/

BTW, there is an interesting bug in chrome. If you open jsfiddle in separate tab, the calendar popup will be shown on current tab. It's already reported.

answered Jun 17 '15 at 14:54

Michał Šrajer

30,364
7
62
85

initKeyboardEvent is deprecated, is there any alternative to above script with out using the `initKeyboardEvent`. – karmendra Nov 29 '15 at 10:54
at least in chrome you should use inputDateElem.focus(); before dispatching – bortunac Feb 20 '16 at 13:30
15

This does not work, at least not anymore. MDN states - `Note: manually firing an event does not generate the default action associated with that event. For example, manually firing a key event does not cause that letter to appear in a focused text input. In the case of UI events, this is important for security reasons, as it prevents scripts from simulating user actions that interact with the browser itself.` (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) – tiblu Nov 22 '16 at 16:04

Alice Purcell · Accepted Answer · 2023-07-28T14:28:03.430

11

Chrome 99+ added the showPicker() method: https://chromestatus.com/feature/5692248021794816

Full docs and cross-browser compatibility grid: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker

Example usage:

<input type="date" onfocus="'showPicker' in this && this.showPicker()"/>

edited Jul 28 '23 at 14:28

answered Jan 04 '22 at 11:33

Alice Purcell

12,622
6
51
57

1

This is the correct answer in 2023. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker – James Nisbet Feb 04 '23 at 04:26
Awesome answer, using it in a one-liner results in: ``. Or more modern: `` – Ken Jul 09 '23 at 10:15
Thanks, Ken! I've added the first one of those as an example :) – Alice Purcell Jul 28 '23 at 14:28

score 5 · Answer 7 · answered Mar 08 '18 at 15:59

For desktop (and mobile), place input in a div with relative positioning and an icon, with the input styled as follows:

input {
  position: absolute;
  opacity: 0;

  &::-webkit-calendar-picker-indicator {
    position: absolute;
    width: 100%;
  }
}

This stretches the picker indicator over the complete parent div, so that it always shows the date control when you tap the parent div's icon and/or text.

malko · Answer 8 · 2021-10-01T14:51:29.117

2021 Firefox / Chrome update of Madacol reply.

Inspired by other replies I pushed a little further Madacol's solution to get rid of the bad behaviour under firefox when you clicked on the right of the button (reseting the input). Here it is.

.datepicker{
  display: inline-flex;
  position: relative;
  overflow: clip;
}
.datepicker:focus-within {
    outline: black auto 2px;
}
.datepicker > input[type=date] {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: 100%;
  opacity: 0;
    cursor:pointer;
}
.datepicker > input[type=date]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: -150%;
  left: -150%;
  width: 300%;
  height: 300%;
  cursor: pointer;
}

<!-- Tested on 2021-09 under latest chrome and firefox -->
<label class="datepicker">
  
  <input type="date" value="2021-09-30" />  
</label>

Update as of may 2023 this solution doesn't work anymore with latest firefox version — malko, May 17 '23 at 14:27

score 2 · Answer 9 · answered Jul 14 '15 at 18:00

I think people want very often to use another icon or element to open the native datepicker box.

I figured out that the javascript solution with "click() & .focus()" only works in webkit and some other desktop browsers but unfortunatly not in FireFox.

But It is possible by another way, by overlaying the inputField over the icon element (or whatever you want to use) and made it invinsible by opacity 0.

This works really great on mobile devices, for desktop devices i would suggest you to add the onclick event as fallback "$('.dateInpuBox').click().focus()"

    .myBeautifulIcon {
      position: relative;
      width: 50px;
    }
    .dateInputBox {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0;
    }

<div class="myBeautifulIcon">
  ICON
  <input class="dateInputBox" type="date" />
</div>

It does not work as intended in Chrome 93 on Linux (not sure about Windows). Picker icon is smaller than whole input box. — Scalway, Oct 27 '21 at 04:09

score 0 · Answer 10 · answered Sep 22 '20 at 00:55

0

You can create another label that natively trigger browser datepicker. Tested on Firefox:

<input type="date" id="started[date]" name="started[date]">
<label class="btn btn-info btn-date" type="button" for="started[time]">
    <i class="far fa-calendar-alt"></i>
</label>

answered Sep 22 '20 at 00:55

Hariadi

606
10
17

Probably the best answer, since it's not relying on hacks, but native behavior of html elements. One should be able to achieve the desired look via css and use this to make sure it works anywhere. – Tashows Oct 18 '21 at 11:39
doesn't really work, at least not in Chrome - a label, when triggered, just _focuses_ the target element, won't exactly open its controls. – igorsantos07 Aug 16 '22 at 05:39

score 0 · Answer 11 · answered Dec 24 '21 at 10:11

0

I just want to add my answer for anyone looking for an even simpler, quicker solution. I just use two events in the input .onfocus and .onblur

<input type="text" name="date_picked" onfocus="(this.type='date')" onblur="(this.type='text')">

Works in all browsers as far as I'm aware.

answered Dec 24 '21 at 10:11

David Dr.

87
9

The onfocus causes the input to appear like a date picker and when its clicked off, it shows the date. Just wanted to add clarification – David Dr. Dec 24 '21 at 10:12

Method to show native datepicker in Chrome

11 Answers11

Updated July 2020 - Works with new Chrome's calendar-picker

Linked

Related