and it displays the calendar wh...">

(input type = date) calendar display when clicking on the field

I am using <input type="date" name="bday">

and it displays the calendar when I click on the right side of the window as follows.

enter image description here

Now I want to display the calendar when I click on any part of the window. What should I code to achieve this.

enter image description here


source to share

2 answers


Even Firefox doesn't seem to support the date input element ...

So this might be a nice hack for chrome, but if you want the actual correct date input element in a cross-browser account for some library / plugin use.


Tested in IE11 doesn't even seem to support the date input element ... Just hide the ".picker" for IE11 I guess.


Can't be made possible:

This is a dirty css / js hack that I have not tested in other browsers other than chrome.


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


JS (Jquery):

$(".picker").on("change", function() {
    var date = $(this).val();



.wrapper {
    position: relative;
    width: 146px;
    height: 24px;
    margin: 20px;
    overflow: hidden;
.date {
    border: 0;
    width: 146px;
    height: 24px;
    line-height: 24px;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    border: 1px solid #999;
    box-sizing: border-box;
.picker {
    width: 200px;
    height: 24px;
    font-size: 999px;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;


Wish this is not possible, I tried to simulate the click event on the down arrow, but that didn't work either. I'll try to see if I can do anything with a little visual hack: P



Just try this code for calendar

  $(document).ready(function() {
 <input id="datepicker"  class="form-control" type="text" name="Hire Date" placeholder="Hire date" />




All Articles