JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<script src="http://www.appelsiini.net/download/jquery.jeditable.js"></script>
<script src="http://vitalets.github.com/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="http://vitalets.github.com/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css">
<div class="container">
    <div class="hero-unit">
        <h1>Jeditable Bootstrap Datepicker Demo</h1>
        <p>from blog post URL</p>
        <p>
            <strong>Date:</strong> <span class="editable">date</span>    
        </p>
    </div>
</diV>

JavaScript

$.editable.addInputType('datepicker', {
    element: function(settings, original) {
        var input = $('<input/>');
        $(this).append(input);
        return (input);
    },
    plugin: function(settings, original) {
        settings.onblur = 'ignore';
        $(this).find('input').datepicker({
            'autoclose': true,
            format: 'dd-mm-yyyy'
        });
    }
});

$('.editable').editable(
    function(value, settings) {
        return (value);
    }, {
        type: 'datepicker',
        indicator: 'Saving...',
        tooltip: 'Double-click to edit...',
        placeholder: '<span class="muted">Double-click to edit...</span>',
        cancel: '<button class="btn btn-mini btn-forced-margin" type="cancel" >Cancel</button>',
        submit: '<button class="btn btn-mini btn-primary btn-forced-margin" type="submit" >Save</button>',
        style: 'display: inline;',
        width: 'none',
        event: 'dblclick',
    }
);