and it displays the calendar wh...">
Clever Geek Handbook

(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

+3


source to share


2 answers


Edit3:

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.

Edit2:

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

Edit:

Can't be made possible: https://jsfiddle.net/65p0et7z/

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



HTML:

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

JS (Jquery):

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

CSS

.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

0


source


Just try this code for calendar
                     



  <script>
  $(document).ready(function() {
    $("#datepicker").datepicker();
  });
  </script>
</head>
<body>
 <input id="datepicker"  class="form-control" type="text" name="Hire Date" placeholder="Hire date" />
</body>
</html>
-1


source






More articles:


All Articles