Jeditable Custom Type Using Bootstrap Datepicker

I've been exploring some ajax UI techniques lately, specifically inline editing via ajax.  I came across a nice JQuery plugin called jeditable (https://github.com/tuupola/jquery_jeditable) that is working quite well for me for basic String properties. Out of the box it supports text and textarea type inputs when editing.  However, when editing a Date property, it makes more sense to use a datepicker rather than typing in dates. I've been using Twitter bootstrap for my UI and found a nice bootstrap based datepicker here:  https://github.com/eternicode/bootstrap-datepicker. In order to use the datepicker along with Jeditable, you have to extend Jeditable with a custom type.  This post will detail how to create a custom type using the Bootstrap datepicker.


JS Fiddle illustrating this integration:
fiddle: http://jsfiddle.net/4zJ7w/9/
fullscreen: http://jsfiddle.net/4zJ7w/9/embedded/result/

Step 1: Setup

First add all the js libraries/css you need and create the html to hold the date you want to edit.

<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-responsive.min.css">
<link rel="stylesheet" type="text/css" href="http://vitalets.github.com/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css">

<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'>
<script type='text/javascript' src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>

<script type='text/javascript' src="http://www.appelsiini.net/download/jquery.jeditable.js"></script>

<script type='text/javascript' src="http://vitalets.github.com/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>

Step 2: The custom input type

$.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': false,
            format: 'dd-mm-yyyy'
        });
    }
});

What is this doing:

Using the documentation from this Jeditable blog post: http://www.appelsiini.net/2007/8/custom-input-types we are creating a custom input type.  Jeditable has several methods you can implement to build your custom input type but in this case we are just implementing 2: element() and plugin().

The element() method is where we create the input element that will be used to edit the property.
The plugin() method is where we attach any 3rd party plugins to the input, in this case bootstrap datepicker.

Step 3:  Make it Editable

$('.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',
    }
);