How to close the date picker on change for <input type="date" /> HTML5 Input date element

Question

I have a HTML5 <input type="date" /> field, and I want to instantly respond to changed dates.

Currently, the input field partially obscures the data that changes when the date is changed, so I'd prefer to auto-close the calendar picker after a date is changed.

I've tried to .blur() on change, but this doesn't have any effect. The event fires, and I can get the new date value, but the date picker is not hidden. Any suggestions are welcome.

  .bind('change', function(){
    var input = $(this);
    if(input.is(':valid'))
    {
      input.blur();
    }
  });

[UPDATE]

By now, I have also resorted to adding an additional input element on the page (<input type="text" id="hideMyCalendar" />) and instead of input.blur(); to do a $('#hideMyCalendar').focus(); but this also doesn't hide the picker, even though the focus is visually brought to a different control. By now, I assume, the only possible way would be to call a chrome (webkit) specific method, but I haven't fount such a method to exist (yet).

Answer 1

01/30/14 This no longer works

This is ugly, but it works for Chrome.

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

This is the only way I was able to close the html5 date after selecting a date. Just remove the date attribute, then apply it again. The value is retained, and it just looks as if it was closed manually.

UPDATE:

This is the method I use to make all date types close like this:

$(document).ready(function () {
    //make all date html5 close on change in chrome
    $('input[type="date"]').change(function () {
        closeDate(this);
    });

});

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

Answer 2

so I'd prefer to auto-close the calendar picker after a date is changed

HTML 5 input type="date" does not specify how this input should be realized by browsers. It can be a graphical datepicker, it can be a simple validation on a user input - whatever the browser vendor wants to implements.

So, hiding the "datepicker", which is in fact browser dependend, is not possible in a cross-browser way.

However, you can use the jQuery UI datepicker, where you have full control how it is shown and hidden.

Answer 3

You said (in your comment):

I prefer the HTML5 input element because I hope this brings unity to the web.

And yet you are willing to call a webkit specific method? (in the update to the question):

By now, I assume, the only possible way would be to call a chrome (webkit) specific method, but I haven't fount such a method to exist (yet).

I think that defies the purpose. Then you will need an Opera specific method, an IE specific method, a Firefox specific method and so on... no more unity to the web.

If you really want a single user experience across browsers, then go for jQuery UI. It doesn't only give you the versatility to do what you want (as Nil'z points out), it also give you the same behaviour across heterogeneous browsers.

---

Instead of using HTML5 where available. What you should want to do is to fall back to HTML5 when JavaScript is not available. That is using unobstructive JavaScript principles. In fact jQuery is designed to do that by default...

Just create your HTML5 (and HTML4 compatible) field:

<input type="date" name="date" id="date" value="" />

Your jQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js></script>  
<script type="text/javascript" src="js/jquery-ui.js"></script>

And your script:

<script type="text/javascript">
    $('#date').datepicker();   
</script>

The end result will be that all browsers where jQuery can run will use the jQuery based datepicker, if JavaScript is not available then it will use HTML5 datepicker, and finally if the browser doesn't support HTML5 then it will be just a text field. That's graceful degradation.

---

And of course you will use the hide method from jQuery datepicker:

$( ".selector" ).datepicker( "hide" );

Note: +1 to Nil'z

---

I know I didn't answer the question, but this solves the problem.