iPhone 6 / iOS 8.1.2 - Setting input type='date' with JavaScript gets wrong Keyboard

I wanted to have a placeholder on my date input, <input type="date" id="birthday"> however due to the W3C spec we can't do this so, I have amended my item to a text input <input type="date" id="birthday"> and on focus I change the input type to date.

$(document.body).on('focus', '#birthday', function (event) {

event.preventDefault();

  if($(this).attr('type') !== 'date') {
     $(this).attr('type','date'); 
  }
});

This is fine in the desktop browser (where supported), on Android, iPhone 4 and other devices however on the iPhone 6 when the input has focus we still get the text keyboard and not the date selector keyboard for the input. Does anyone have any ideas of how I can get the correct keyboard to be shown?

I know it may be better to use or write a JS datepicker but I would like to use the native HTML5 date input. When the item loses focus and I click back on it the correct keyboard is shown. I tried to include code so when we gain the focus, we create a blur event then reintroduce the focus or a click event but this doesn't seem to work (see below). Has anyone had this problem before?

$(document.body).on('focus', '#birthday', function (event) {

event.preventDefault();
// this doesn't work
  if($(this).attr('type') !== 'date') {
     $(this).attr('type','date'); 
     $(this).blur();
     // perhaps this should be in a callback?
     $(this).click();
  }
});