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!

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!

• javascript
• jquery
• html

• 2 Don't! If you're using a browser default input, let the browser default UI stay! It increases usability by being slightly less terrible than whatever you're going to do. – Evan Davis Commented Oct 16, 2014 at 20:23
• Clicking anywhere outside of the calendar dropdown closes it for me, so I'm not sure if you would even need a button. – colonelsanders Commented Oct 16, 2014 at 20:23
• he wants the button because he also wants to be able to open it this way :) – user796446 Commented Oct 16, 2014 at 20:31
• It's OK if there's no separate button. In that case, I'll need to change the look of the triangle icon. Would also like to make it always visible, rather than visible only on hover. Will that be possible? – Aniket Suryavanshi Commented Oct 16, 2014 at 20:40
• 1 if you want it always visible you can do input::-webkit-calendar-picker-indicator { opacity: 1; } – caraie Commented Aug 26, 2015 at 17:48

2 Answers 2

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>

Try this one:

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

});

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