1

Chrome now seems to have a native datepicker for the <input type="date"> fields, which is awesome. Unfortunately, the designers of my company don't like the look of it and want to replace it with a JavaScript alternative.

To do that, the input type has to be changed to text so the native datepicker doesn't get triggered. But this breaks the native datepicker on smartphones, which we want to keep because it's better usability wise than a JavaScript datepicker.

Basically, on desktops we want the JavaScript date picker and on mobiles we want the native one.

Seen as we can't change the input type from text to date, I have to somehow disable the native datepicker of browsers. Does anyone know how to do that?

John Dorean
  • 3,744
  • 9
  • 51
  • 82
  • 1
    Either have two inputs, one date and one text where you show/hide them with CSS depending on screen resolution (media queries), or dynamically change the type="text" to type="date" with javascript if window.width is below a certain threshold – ninja May 12 '14 at 14:14
  • Thanks ninja, that seems to be the best solution. Unfortunately you're not able to dynamically change the input type using JavaScript (at least in Chrome). If you add your comment as an answer I'll accept. – John Dorean May 12 '14 at 14:31
  • 1
    Regarding @ninja's comment, you can dynamically insert a new tag or . If you're using jQuery, you can remove the current one when the page loads and replace it with a new tag, or in angularJS you can create a directive which loads and uses a different template based on the screen type or width. – SoluableNonagon May 12 '14 at 14:35

0 Answers0