JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Simple date input. When you click in this whitespace on this control, it will focus on the mm part. -->
<input 
    type="date" 
    class="form-control" />
<!-- Date input that starts as text and goes back and forth with focus, but doesn't ever select the mm unless you click directly on it. -->
<input 
    type="text" 
    class="form-control"
    placeholder="Start Date" 
    onfocus="this.type = 'date'" 
    onblur="this.type = 'text'" />
<!-- Properly handles focus until it has turned to a text type once. When it turns back to a date type, it will no longer select mm when you click in the whitespace. -->
<input 
    type="date" 
    class="form-control"
    placeholder="Won't work anymore."
    onfocus="this.type = 'date'" 
    onblur="this.type = 'text'" />
<!-- Same behavior happens if I convert it during onLoad -->
<input 
    type="date" 
    class="form-control"
    placeholder="Won't work."
    onfocus="this.type = 'date'" 
    onblur="this.type = 'text'"
    data-convert-on-load/>

JavaScript

var dateInputs = $('input[data-convert-on-load').toArray(); 
dateInputs.forEach(function (item) { 
    console.log('weee');
    console.log(item); 
    $(item).attr('type', 'text'); 
});