CODEWITHSUNDEEP
javascriptjqueryhtml
Aniket Suryavanshi
Aniket Suryavanshi

Reputation: 1584

HTML5 input type=date: Can I open/close the date picker with JavaScript?

I am trying to customise the HTML5 input type="date" element. I want to add a separate button clicking which will toggle visibility of the date picker dropdown. I couldn't find any info on this. Any help greatly appreciated!

enter image description here

Upvotes: 19

Views: 15007

Answers (2)

Yashwanth Gurrapu
Yashwanth Gurrapu

Reputation: 1069

Here is Solution I made using CSS.

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.exmp-wrp {
    margin-top: 100px;
    position: relative;
    width: 200px;
}

.btn-wrp {
    border: 1px solid #dadada;
    display: inline-block;
    width: 100%;
    position: relative;
    z-index: 10;
}

.btn-clck {
    border: none;
    background: transparent;
    width: 100%;
    padding: 10px;
}

.btn-clck::-webkit-calendar-picker-indicator {
    right: -10px;
    position: absolute;
    width: 78px;
    height: 40px;
    color: rgba(204, 204, 204, 0);
    opacity: 0
}

.btn-clck::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.btn-clck::-webkit-clear-button {
    margin-right:75px;
 }
.btn {
    height: 100%;
    background: #fda200;
    border: none;
    color: #fff;
    padding: 13px;
    position: absolute;
    right: 0;
    top: 0;
}
<div class="exmp-wrp">
  <div class="btn-wrp">
    <input type="date" class="btn-clck"/>
  </div>
  <button class="btn">Click me</button>
</div>

Upvotes: 12

Giannis Grivas
Giannis Grivas

Reputation: 3412

Try this one:

$(document).ready(function () {
    $('input[type="date"]').change(function () {
        closeDate(this);
    });

});

function closeDate(dateInput) {
    $(dateInput).attr('type', 'text');
    $(dateInput).attr('type', 'date');
}

Upvotes: -2

Related Questions