This answer is outdated, i suggest to use the showPicker() method as described in this answer before trying my outdated solution.

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

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

2024 Update

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

HTMLInputElement.showPicker() is now compatible with major browsers https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker

Outdated answer

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

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

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.

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.

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>

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>

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>

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.

For the people who want to open datepicker calender when clicking on input rather than just the calender icon, here's how i did it in React (Yes i did use showPicker() but it is used like e.currentTarget.showPicker()):

<input
    type="date"
    className="form-control"
    onClick={(e) => e.currentTarget.showPicker() }
/>

For Vue, using composition API

To trigger the native date picker programmatically on Chrome, you can use the .showPicker() method on the input element. In Vue, you need to get a reference to the input element and call .showPicker() inside a handler for the focus event.

<template>
  <input
    ref="installDateInput"
    type="date"
    @focus="showNativeDatePicker"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const installDateInput = ref<HTMLInputElement | null>(null);

function showNativeDatePicker() {
  if (installDateInput.value && 'showPicker' in installDateInput.value) {
    installDateInput.value.showPicker();
  }
}
</script>