JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>
<table border="1">
    <thead>
        <tr>
            <th>Element</th><th>Markup</th><th>$.val()</th><th>$.attr("value")</th><th>$.prop("value")</th><th>el.getAttribute("value")</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="date" value="1959-04-10" /><!-- valid ISO 8601 date --></td>
        <td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td><input type="date" value="4/10/1959" /><!-- valid US date --></td>
        <td></td><td></td><td></td><td></td><td></td>
    </tr> 
    <tr>
        <td><input type="date" value="bleh-05-20" /><!-- non-number year --></td> 
        <td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td><input type="date" value="1959-13-20" /><!-- month over 12 --></td> 
        <td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td><input type="date" value="1959-02-30" /><!-- invalid date (Feb 30th) --></td> 
        <td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td><input type="date" value="bad date" /><!-- nothing like a date --></td> 
        <td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td><input type="date" value="" /><!-- blank value --></td> 
        <td></td><td></td><td></td><td></td><td></td>
    </tr>
    </tbody>
</table>

CSS

@import url("http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/smoothness/jquery.ui.core.css");
@import url("http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/smoothness/jquery.ui.datepicker.css");
@import url("http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/smoothness/jquery.ui.theme.css");

body {
    font-family: Verdana, Helvetica, Sans-Serif;
    font-size: 13px;
}

JavaScript

// Use jQuery UI date picker for any input[type='date'] fields, if the browser doesn't natively support it
$(function() {
    var datefields = $("input[type='date']");
    // Log starting markup
    datefields.each(function() {
        var $el = $(this), $parent = $el.parent();
        $parent.next().text($parent.html());
        
    });
    
    if (!Modernizr.inputtypes.date) {
        datefields    
            .datepicker()
            .each(function() {
                // Turn ISO 8601 date string into US date string
                var dateParts = this.value.split("-"),
                    date = $.map(dateParts, function (el) {
                        return !isNaN(parseInt(el, 10)) ? el : null;
                    }).length === 3
                        ? new Date(dateParts[0], dateParts[1], dateParts[2])
                        : null;
                this.type = "text";
                this.value = !date ? "" :
                    date.getMonth() + "/" +
                    date.getDate() + "/" +
                    date.getFullYear();
            });
    }
    
    // Log final results
    datefields.each(function() {
        var $el = $(this), $parent = $el.parent();
        $parent.next().next().text($el.val())
        $parent.next().next().next().text($el.attr("value"));
        $parent.next().next().next().next().text($el.prop("value"));
        $parent.next().next().next().next().next().text(this.getAttribute("value"));
    });
});