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.

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?

Answer 1

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.

Answer 2

I got cinatic's solution working on Chrome thank's to Andy's trick, and I added a sample hovering styling.

div {
  position: relative;
}
input {
  position: absolute;
  opacity: 0;
}
input::-webkit-calendar-picker-indicator {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}
input:hover + button {
  background-color: silver;
}

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

                                                        
            

查看更多

0人赞 添加讨论(0) 举报

•  加载中...

Answer 3

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.

Answer 4

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>

Answer 5

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:

• List of symbols
• codepen example with font-awesome icon

Answer 6

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